鍍金池/ 問答/HTML5  PHP  網(wǎng)絡(luò)安全/ 我要怎麼利用 php 後端將數(shù)據(jù)丟給 chart 呢

我要怎麼利用 php 後端將數(shù)據(jù)丟給 chart 呢

我現(xiàn)在能印出這些數(shù)據(jù)

[{"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);

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

clipboard.png

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

clipboard.png

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

回答
編輯回答
做不到

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

2017年9月12日 14:55
編輯回答
做不到

可以通過datetime插件來篩選時間，通過后端將這段時間的數(shù)據(jù)查詢出來渲染到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
        }]
    }
  }
});

clipboard.png

將yLables值賦為[]，將scales下yAxes的display屬性設(shè)置為false，這樣就可以讓y軸不顯示啦~
具體可以看官方文檔http://www.chartjs.org/docs/l... 或者 http://www.chartjs.org/sample...，還有什么問題可以跟我交流哦

2017年12月28日 05:40
編輯回答
伴謊

用圖表庫就好了：
ECharts:
案例一：簡單
案例二：可縮放
給圖標(biāo)添加一點點擊事件，然后修改數(shù)據(jù)源頭就好了，或者外部添加一些篩選按鈕。
有兩種思路

  1. 后端直接返回一年每一天的數(shù)據(jù)，前端直接自己計算，可以按照月份合并數(shù)據(jù)，然后顯示到圖表上，然后如果選擇某個月，就顯示這個月每一天的數(shù)據(jù)
  2. 后端計算，前端每次顯示去后端獲取數(shù)據(jù)

核心思想就是重新設(shè)置數(shù)據(jù)源就能顯示你想要的級別，甚至可以顯示到秒級

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

  1. 當(dāng)前顯示的是月份級別的

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

    clipboard.png

  2. 當(dāng)我選擇月份的時候

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

    clipboard.png

  3. 選擇月份可以使用圖表庫的點擊事件，也可以外部做下來篩選之類的
2018年2月9日 18:04