亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Chart.js - 如何擁有統計標簽并填充動態數據?

Chart.js - 如何擁有統計標簽并填充動態數據?

慕虎7371278 2023-02-24 16:32:07
我正在研究 chart.js,我有通過 ajax 來自 JSON 的數據。請參見下面的示例:[{"timestamp":"06:00:00.000000","true_count":2},{"timestamp":"07:00:00.000000","true_count":5},{"timestamp":"08:00 :00.000000","true_count":7},{"時間戳":"09:00:00.000000","true_count":8},{"時間戳":"10:00:00.000000","true_count":12} ,{"timestamp":"11:00:00.000000","true_count":15},{"timestamp":"12:00:00.000000","true_count":20},{"timestamp":"13:00 :00.000000","true_count":17},{"時間戳":"14:00:00.000000","true_count":14},{"時間戳":"16:00:00.000000","true_count":11} ,{"時間戳":"17:00:00.000000","true_count":19},{"timestamp":"18:00:00.000000","true_count":22},{"timestamp":"19:00:00.000000","true_count":16},{"timestamp":"20:00: 00.000000","true_count":14},{"時間戳":"22:00:00.000000","true_count":7}]我用于圖表的 JS 代碼如下:    // create initial empty chartvar ctx_live = document.getElementById("chLine");var myChart = new Chart(ctx_live, {  type: 'bar',  data: {    labels: [],    datasets: [{      data: [],      borderWidth: 1,      borderColor:'#00c0ef',      label: 'liveCount',    }]  },  options: {    responsive: true,    title: {      display: true,      text: "Count Per Hour",    },    legend: {      display: false    },    scales: {      yAxes: [{        ticks: {          beginAtZero: true,        }      }]    }  }});// logic to get new datavar getData = function() {   var _data =[];   var _labels = [];  $.ajax({    url: 'chart_data',         type: "get",    success: function(data) {    full_data = JSON.parse(data);    full_data.forEach(function(key,index) {    _data.push(key.true_count);    _labels.push(key.hour); });        myChart.data.labels = _labels;    myChart.data.datasets[0].data = _data;      myChart.update();    }  });};// get new data every 3 secondssetInterval(getData, 3000);現在,這工作正常并顯示了 true_count 隨著時間的推移,這是一個小時的基礎?,F在,該圖表僅顯示帶計數的小時數,但我想做的是將靜態小時數設置為從上午 12 點到晚上 11 點,對于我沒有數據的小時數,true_count 將為零,對于那些我有數據,真實計數將分配給那個小時并顯示在圖表上。關于我該怎么做的任何想法?
查看完整描述

1 回答

?
倚天杖

TA貢獻1828條經驗 獲得超3個贊

這是一個例子:


// create initial empty chart

var ctx_live = document.getElementById("chLine");

var myChart = new Chart(ctx_live, {

  type: 'bar',

  data: {

    labels: [],

    datasets: [{

      data: [],

      borderWidth: 1,

      borderColor: '#00c0ef',

      label: 'liveCount',

    }]

  },

  options: {

    responsive: true,

    title: {

      display: true,

      text: "Count Per Hour",

    },

    legend: {

      display: false

    },

    scales: {

      yAxes: [{

        ticks: {

          beginAtZero: true,

        }

      }]

    }

  }

});


// Some constants to be changed later:

const HOUR_TO_START = 0;

const HOUR_TO_END = 23;

// helper:

const intToAmPm = (i) => 

  i==0 ? '12 AM' :

  i==12 ? '12 PM' :

  i < 12 ? i + ' AM' :

  (i-12) + ' PM';


// logic to get new data

var getData = function() {

  var _data = [];

  var _labels = [];

  $ajax({

    url: 'chart_data',

    type: "get",

    success: function(data) {

      full_data = JSON.parse(data);

      let preparedData = {};

      full_data.forEach(function(key, index) {

        let hour = parseInt(String(key.timestamp).substring(0, 2));

        preparedData[hour] = key.true_count;

      });

      for (let i = HOUR_TO_START; i <= HOUR_TO_END; i++) {

        _data.push(preparedData[i] === undefined ? 0 : preparedData[i]);

        _labels.push(intToAmPm(i));

      }


      myChart.data.labels = _labels;

      myChart.data.datasets[0].data = _data;


      myChart.update();

    }

  });

};


// get new data every 3 seconds

//setInterval(getData, 3000);

getData();


// THIS IS FOR TESTING. IMITATE BACKEND

function $ajax(param) {

  param.success('[{"timestamp":"06:00:00.000000","true_count":2},{"timestamp":"07:00:00.000000","true_count":5},{"timestamp":"08:00:00.000000","true_count":7},{"timestamp":"09:00:00.000000","true_count":8},{"timestamp":"10:00:00.000000","true_count":12},{"timestamp":"11:00:00.000000","true_count":15},{"timestamp":"12:00:00.000000","true_count":20},{"timestamp":"13:00:00.000000","true_count":17},{"timestamp":"14:00:00.000000","true_count":14},{"timestamp":"16:00:00.000000","true_count":11},{"timestamp":"17:00:00.000000","true_count":19},{"timestamp":"18:00:00.000000","true_count":22},{"timestamp":"19:00:00.000000","true_count":16},{"timestamp":"20:00:00.000000","true_count":14},{"timestamp":"22:00:00.000000","true_count":7}]');

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

<canvas id="chLine"></canvas>


查看完整回答
反對 回復 2023-02-24
  • 1 回答
  • 0 關注
  • 183 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號