我正在使用 Chart.js 2.6.0 库。
我正在尝试制作一个比较折线图，例如 Google Analytics 比较功能:Screenshot
我必须比较电子商务的两个收入日期周期。
我想绘制两个具有不同标签的 x 轴，一个 x 轴用于第一个周期，一个用于第二个周期。
现在我可以绘制两条线，每个周期一条，以及两个 xAxes，但我只能使用一组标签，给出以下结果: screeshot
显然错误的是，线上的每个周期 2 点都对应于周期 1 标签(请参阅第二个屏幕截图中的悬停信息窗口)
这是我的代码
var ctx = $("#ordersCompareChart");
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: data.labels,
datasets: [{
borderColor: "#E25F5F",
label: 'Period 1: From ' + $('#from_first').val() + ' to ' + $('#to_first').val(),
data: data.values_first,
borderWidth: 3,
xAxisID: "x-axis-1",
},
{
borderColor: "#2793DB",
label: 'Period 2: From ' + $('#from_second').val() + ' to ' + $('#to_second').val(),
data: data.values_second,
borderWidth: 3,
xAxisID: "x-axis-2",
},
]
},
options: {
scales: {
xAxes: [
{
display: true,
tipe: "time",
scaleLabel: {
display: true,
labelString: 'Period 1'
},
id: "x-axis-1"
},
{
display: true,
tipe: "time",
id: "x-axis-2",
labels: data.labels_second,
scaleLabel: {
display: true,
labelString: 'Period 2'
},
id: "x-axis-2"
}
],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Total'
},
ticks: {
callback: function(value, index, values) {
return value.toLocaleString("de-DE",{style:"currency", currency:"EUR"});
}
}
}]
}
}
});
谢谢大家的解答
最佳答案
抱歉，如果我之前没有回答。
这是一个工作 fiddle https://jsfiddle.net/7L0fu4er/10/
让我们解释一下我的解决方案:
使用 Charts.js，您只能对两个 x 轴使用一组标签，解决方法是使用数组中每个值的 2 个日期填充标签数组，之后，您必须在每个 xAxe 的“ticks”方法将用分隔符(在我的例子中为“#”)分割日期。
在我们的例子中，我们想要显示两个时期(例如每天、本周和上周的电子商务收入)，您的标签数组将类似于:
{labels: ["09/01/2018#02/01/2018","10/01/2018#03/01/2018"] ...}
如果您看到第一个值“09/01/2018#02/01/2018”，则“#”字符之前的日期代表句点 1，第二个值代表句点 1。第 2 期。
所以
首先。您必须构建标签数组，每个周期的天数必须与每个周期值的数字相同
为每个 xAxe 提供唯一的 ID
为每个 xAxe 调用“ticks”回调，以详细说明每个标签数组值，以便您可以拆分并绘制每天的正确日期
希望对你有帮助
关于javascript - Chart.js:使用折线图比较两个时期，例如 Google Analytics，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44926415/