Chart.js：使用折线图比较两个时期，例如 Google Analytics

Question

我正在使用 Chart.js 2.6.0 库。

我正在尝试制作一个比较折线图，例如 Google Analytics 比较功能：屏幕截图

我必须比较电子商务的两个收入日期期间。

我想绘制两个具有不同标签的 x 轴，一个 x 轴用于第一个周期，一个用于第二个周期。

现在我可以绘制两条线，每个周期一条，以及两个 xAxes，但我只能使用一组标签，给出以下结果 ：

显然错误的是，线上的每个周期 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"});

                        }
                    }
                    }]
                }
            }

        });

谢谢谁能解答一下

Answer 1

如果我之前没有回答，我很抱歉。

这是一个工作小提琴 https://jsfiddle.net/7L0fu4er/10/

让我们解释一下我的解决方案：

使用 Charts.js，您只能对两个 x 轴使用一组标签，解决方法是使用数组中每个值的 2 个日期填充标签数组，之后，您必须在“刻度”中调用回调每个 xAxe 的方法都会用分隔符（在我的例子中为“#”）分割日期。

在我们的例子中，我们想要显示两个时期（例如每天、本周和上周的电子商务收入），您的标签数组将类似于：

{labels: ["09/01/2018#02/01/2018","10/01/2018#03/01/2018"] ...}

如果您看到第一个值"09/01/2018#02/01/2018"，则“#”字符之前的日期代表周期 1，第二个值代表周期 2。

所以

• 第一的。您必须构建标签数组，每个周期的天数必须与每个周期值相同

• 为每个 xAxe 提供唯一的 ID

• 为每个 xAxe 调用“ticks”回调，该回调将详细说明每个标签数组值，以便您可以拆分并绘制每天的正确日期

我希望我对你有帮助