首頁猿問 Chart.js -...

Chart.js - 如何擁有統(tǒng)計標(biāo)簽并填充動態(tài)數(shù)據(jù)？

JavaScript

慕虎7371278 2023-02-24 16:32:07

我正在研究 chart.js，我有通過 ajax 來自 JSON 的數(shù)據(jù)。請參見下面的示例：[{"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);現(xiàn)在，這工作正常并顯示了 true_count 隨著時間的推移，這是一個小時的基礎(chǔ)?，F(xiàn)在，該圖表僅顯示帶計數(shù)的小時數(shù)，但我想做的是將靜態(tài)小時數(shù)設(shè)置為從上午 12 點到晚上 11 點，對于我沒有數(shù)據(jù)的小時數(shù)，true_count 將為零，對于那些我有數(shù)據(jù)，真實計數(shù)將分配給那個小時并顯示在圖表上。關(guān)于我該怎么做的任何想法？

查看完整描述

1 回答

倚天杖

TA貢獻(xiàn)1828條經(jīng)驗獲得超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}]');

}

反對回復(fù) 2023-02-24