我有兩個表，我在執(zhí)行mysql查詢（table1是pl_pl，table2是act_act）后得到的表格：table1:label act_hrsJan-19 7Feb-20 8Mar-20 9table2:label pl_hrsMar-20 45Apr-20 53我必須標(biāo)記中的所有點act_hrs并pl_hrs使用具有共同 x 軸的折線圖label 。我為此嘗試了以下javascript代碼：javascript代碼：function show_scurve_Graph() { { var plandata = <?php echo json_encode($pl_pl); ?>; var actualdata = <?php echo json_encode($act_act); ?>; var labels = []; for (var i in plandata) { labels.push(plandata[i].label); } for (var j in actualdata) { labels.push(actualdata[j].label); } new Chart("scurve_chart", { type: 'line', data: { labels: Array.from(labels), datasets: [{ label: "Planned Hours", fill: false, borderColor: "rgba(255, 0, 0, 1)", pointHoverBackgroundColor: "rgba(255, 0, 0, 1)", data: plandata.map(o => ({ x: Number(o.label), y: Number(o.pl_hrs)})) }, { label: "Actual Hours", fill: false, backgroundColor: "rgba(0, 255, 0, 0.75)", borderColor: "rgba(0, 255, 0, 1)", pointHoverBackgroundColor: "rgba(0, 255, 0, 1)", pointHoverBorderColor: "rgba(0, 255, 0, 1)", data: actualdata.map(o => ({x: Number(o.label), y: Number(o.act_hrs)})) } ] }, options: { tooltips: { callbacks: { title: (tooltipItem, data) => "Month " + data.datasets[tooltipItem[0].datasetIndex].data[tooltipItem[0].index].x } }, scales: { yAxes: [{ ticks: { beginAtZero: true }, scaleLabel: { display: true, labelString: 'Hours' } }], xAxes: [{ ticks: { min: 0, max: 53, stepSize: 1 }, scaleLabel: { display: true, labelString: 'Month' } }] } }}); }}
1 回答
莫回?zé)o
TA貢獻1865條經(jīng)驗 獲得超7個贊
以下幾行是罪魁禍首：
data: plandata.map(o => ({ x: Number(o.label), y: Number(o.pl_hrs)}))
和
data: actualdata.map(o => ({x: Number(o.label), y: Number(o.act_hrs)}))
map回調(diào)應(yīng)該只返回小時數(shù)字，如下所示：
// Planned
data: plandata.map(o => Number(o.pl_hrs))
// Actual
data: actualdata.map(o => Number(o.act_hrs))
該data屬性只需要您要在圖形上繪制的圖形數(shù)組。這是一個jsfiddle
labels注意：您應(yīng)該根據(jù)您在圖表配置中使用的標(biāo)簽對所有數(shù)據(jù)源上的數(shù)據(jù)進行規(guī)范化。我的意思是，數(shù)據(jù)數(shù)組中數(shù)字的順序應(yīng)該與標(biāo)簽順序相對應(yīng)。
- 1 回答
- 0 關(guān)注
- 155 瀏覽
添加回答
舉報
0/150
提交
取消