使用 php 如何製作長(zhǎng)條圖表？

我找到這個(gè)圖表，只是我使用 php 後端
我不清楚怎麼將數(shù)據(jù)丟到圖表 js 中
請(qǐng)問(wèn)大神能不能寫(xiě)一個(gè)簡(jiǎn)單的範(fàn)本使我融會(huì)貫通一下

有問(wèn)題我會(huì)繼續(xù)補(bǔ)充

有找到這些

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

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

補(bǔ)充

$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);

我現(xiàn)在能印出

[{"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"}]

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

回答

編輯回答

落殤

Echart 了解一下

2017年5月27日 20:03

編輯回答

好難瘦

PHP返回json格式數(shù)據(jù)，前端圖表通過(guò)異步請(qǐng)求php，將返回的json數(shù)據(jù)賦值到圖表的輸入數(shù)據(jù)即可。
特別注意，異步請(qǐng)求存在跨域問(wèn)題，本例中假設(shè) 前端html和負(fù)責(zé)返回json格式數(shù)據(jù)的php url在同一個(gè)域名下。

PHP示例代碼，假設(shè)對(duì)應(yīng)的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  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>

2018年8月20日 16:55

編輯回答