使用 Chart.js 的折线图
Line chart using Chart.js
我有两个表,是在执行 mysql 查询后得到的(表 1 是 pl_pl,表 2 是 act_act),形式为:
table1:
label act_hrs
Jan-19 7
Feb-20 8
Mar-20 9
table2:
label pl_hrs
Mar-20 45
Apr-20 53
我必须使用具有公共 x 轴 label
的折线图来标记 act_hrs
和 pl_hrs
中的所有点
.为此,我尝试遵循 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'
}
}]
}
}
});
}}
我为此使用了以下库:
<script src="vendors/jquery/dist/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
我得到了这样的输出:
以下几行是罪魁祸首:
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
回调应该只return小时数字,像这样:
// Planned
data: plandata.map(o => Number(o.pl_hrs))
// Actual
data: actualdata.map(o => Number(o.act_hrs))
data
属性 只需要一组你想在图表上绘制的数字。这是一个jsfiddle
注意:您应该根据图表 labels
配置中使用的标签对所有数据源上的数据进行规范化。我的意思是,数据数组中的数字顺序应与标签顺序相对应。
我有两个表,是在执行 mysql 查询后得到的(表 1 是 pl_pl,表 2 是 act_act),形式为:
table1:
label act_hrs
Jan-19 7
Feb-20 8
Mar-20 9
table2:
label pl_hrs
Mar-20 45
Apr-20 53
我必须使用具有公共 x 轴 label
的折线图来标记 act_hrs
和 pl_hrs
中的所有点
.为此,我尝试遵循 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'
}
}]
}
}
});
}}
我为此使用了以下库:
<script src="vendors/jquery/dist/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
我得到了这样的输出:
以下几行是罪魁祸首:
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
回调应该只return小时数字,像这样:
// Planned
data: plandata.map(o => Number(o.pl_hrs))
// Actual
data: actualdata.map(o => Number(o.act_hrs))
data
属性 只需要一组你想在图表上绘制的数字。这是一个jsfiddle
注意:您应该根据图表 labels
配置中使用的标签对所有数据源上的数据进行规范化。我的意思是,数据数组中的数字顺序应与标签顺序相对应。