我要怎麼利用 php 後端將數據丟給 chart 呢

Question

我現在能印出這些數據

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

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

如果那一天有被點擊，則就會顯示在這
我想實現這種樣式：

可以把每一天列出來，甚至可以選擇月份，每一次看都是一整個月份的
然後可以隨著點擊次數顯示，有沒有類似的範本可以使用？
我有找到 https://c3js.org/ 但沒有類似的樣式
左側的東西我也不需要，但我不知怎麼拿掉？
而且我還要印出每個月的日期...
這該怎麼實現啊

---

我現在做到這樣了
只是現在有個問題
就是我要如何可以切換月份？以及如果該天沒有數據，也要顯示日期

Answer 1

可以通过datetime插件来筛选时间，通过后端将这段时间的数据查询出来渲染到chartjs图表上
demo
https://jsfiddle.net/m7s43hrs...

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    xLabels: ["2018-08-01", "2018-08-02", "2018-08-03", "2018-08-04", "2018-08-05", "2018-08-06", "2018-08-07", "2018-08-09", "2018-08-10"],
    yLabels: [],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 14, 16, 9, 10, 23, 17, 27],
      backgroundColor: 'rgba(255, 99, 132, 0.2)',
      borderColor: 'rgba(255,99,132,1)',
      borderWidth: 1
    }]
  },
  options: {
    tooltips: {
      callbacks: {
        
      },
      backgroundColor: '#FFF',
      titleFontSize: 16,
      titleFontColor: '#0066ff',
      bodyFontColor: '#000',
      bodyFontSize: 14,
      displayColors: false
    },
    scales:{
        yAxes:[{
            display:false
        }]
    }
  }
});

将yLables值赋为[]，将scales下yAxes的display属性设置为false，这样就可以让y轴不显示啦~
具体可以看官方文档http://www.chartjs.org/docs/l... 或者 http://www.chartjs.org/sample...，还有什么问题可以跟我交流哦

Answer 2

ECharts Demo - http://echarts.baidu.com/exam...

Answer 3

用图表库就好了：
ECharts:
案例一：简单
案例二：可缩放
给图标添加一点点击事件，然后修改数据源头就好了，或者外部添加一些筛选按钮。
有两种思路

1. 后端直接返回一年每一天的数据，前端直接自己计算，可以按照月份合并数据，然后显示到图表上，然后如果选择某个月，就显示这个月每一天的数据
2. 后端计算，前端每次显示去后端获取数据

核心思想就是重新设置数据源就能显示你想要的级别，甚至可以显示到秒级

案例说明：http://echarts.baidu.com/exam...

1. 当前显示的是月份级别的

   option = {
       xAxis: {
           type: 'category',
           data: ['一月', '二月', '三月', '四月', '五月']
       },
       yAxis: {
           type: 'value'
       },
       series: [{
           data: [120, 200, 150, 80, 70],
           type: 'bar'
       }]
   };
   

   

2. 当我选择月份的时候

   option = {
       xAxis: {
           type: 'category',
           data: ['1号', '2号', '3号', '4号']
       },
       yAxis: {
           type: 'value'
       },
       series: [{
           data: [1, 2, 3, 4],
           type: 'bar'
       }]
   };
   

   

3. 选择月份可以使用图表库的点击事件，也可以外部做下来筛选之类的