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

Question

我正在使用 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"});

                        }
                    }
                    }]
                }
            }

        });

谢谢大家的解答

Answer 1

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

这是一个工作 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”回调，以详细说明每个标签数组值，以便您可以拆分并绘制每天的正确日期

希望对你有帮助