使用 php 如何製作長條圖表？

Question

https://c3js.org/

我找到這個圖表，只是我使用 php 後端
我不清楚怎麼將數據丟到圖表 js 中
請問大神能不能寫一個簡單的範本使我融會貫通一下

有問題我會繼續補充

有找到這些

https://bl.ocks.org/mbostock/...
https://bl.ocks.org/mbostock/...

但是有個叫做 data.tsv 文件我不懂，不能取代成 php 嗎？

補充

$chartData = $pdo->query(
      "SELECT `add_time` FROM `view` "
    );

    $data = array();
    $key = 0;
    foreach ($chartData as $item){
      $data[$key] = array(
        '1' => date('Y-m-d',$item['add_time'])
      );

      $key++;
    }
    echo json_encode($data);

我現在能印出

[{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-18"},{"1":"2018-08-18"},{"1":"2018-08-18"},{"1":"2018-08-18"},{"1":"2018-08-18"},{"1":"2018-08-18"},{"1":"2018-08-18"},{"1":"2018-08-18"},{"1":"2018-08-18"},{"1":"2018-08-18"},{"1":"2018-08-18"},{"1":"2018-08-18"},{"1":"2018-08-18"},{"1":"2018-08-18"},{"1":"2018-08-19"},{"1":"2018-08-19"},{"1":"2018-08-19"},{"1":"2018-08-19"},{"1":"2018-08-19"},{"1":"2018-08-19"},{"1":"2018-08-20"},{"1":"2018-08-20"},{"1":"2018-08-20"},{"1":"2018-08-20"},{"1":"2018-08-20"},{"1":"2018-08-20"},{"1":"2018-08-20"},{"1":"2018-08-20"},{"1":"2018-08-20"},{"1":"2018-08-20"},{"1":"2018-08-20"},{"1":"2018-08-20"},{"1":"2018-08-20"},{"1":"2018-08-21"},{"1":"2018-08-21"},{"1":"2018-08-21"},{"1":"2018-08-21"},{"1":"2018-08-21"},{"1":"2018-08-21"},{"1":"2018-08-21"},{"1":"2018-08-21"},{"1":"2018-08-21"},{"1":"2018-08-21"},{"1":"2018-08-21"},{"1":"2018-08-21"},{"1":"2018-08-21"},{"1":"2018-08-21"},{"1":"2018-08-21"},{"1":"2018-08-21"},{"1":"2018-08-22"},{"1":"2018-08-22"},{"1":"2018-08-22"},{"1":"2018-08-22"},{"1":"2018-08-22"},{"1":"2018-08-22"},{"1":"2018-08-22"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-25"},{"1":"2018-08-25"},{"1":"2018-08-30"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-09-01"},{"1":"2018-09-01"},{"1":"2018-09-01"},{"1":"2018-09-01"},{"1":"2018-09-01"},{"1":"2018-09-01"},{"1":"2018-09-01"},{"1":"2018-09-01"},{"1":"2018-09-01"},{"1":"2018-09-01"},{"1":"2018-09-01"},{"1":"2018-09-01"},{"1":"2018-09-01"},{"1":"2018-09-01"},{"1":"2018-09-01"},{"1":"2018-09-01"},{"1":"2018-09-01"},{"1":"2018-09-02"},{"1":"2018-09-02"}]

類似這樣：每一天日期都有

Answer 1

PHP返回json格式数据， 前端图表通过异步请求php，将返回的json数据赋值到图表的输入数据即可。
特别注意，异步请求存在跨域问题，本例中假设 前端html和负责返回json格式数据的php url在同一个域名下。

PHP示例代码， 假设对应的url是 chart/get-data.php

<?php
$arr = [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
        ];
exit(json_encode($arr));
?>

前端html代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <!-- Load c3.css -->
    <link href="https://c3js.org/css/c3-bbe380ed.css" rel="stylesheet">    
    <!-- Load d3.js and c3.js -->
    <script src="https://c3js.org/js/d3-5.4.0.min-e9c75f0e.js" charset="utf-8"></script>
    <script src="https://c3js.org/js/c3.min-5f1d26d2.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<div id="chart"></div>

<script type="text/javascript">
    var chart = c3.generate({
    bindto: '#chart',
    data: {
      columns: []
    }
    });
    $.ajax({
      url: "http://your-php-serer/chart/get-data.php"
    }).done(function(data) {
        chart.load({
        columns: data
        });
    });
</script>

</body>
</html>

Answer 2

实用echart 或者其他js去完成就可以了。后端只需要查询数据并返回给前端,后端直接生成效率很低

Answer 3

Echart 了解一下