Chart.js:像这样的两个句点和一个线状图的比较

Question

我正在使用chart.js 2.6.0库。

我正在尝试制作一个类似Google比较功能的比较线图：屏幕截图

我要比较一下电子商务的两个营业日期。

我想画两个不同标签的x轴，第一段画一个x斧子，第二个画一个。

现在我可以画两条线，每个句点一条，两条xAxes，但是我只能使用一个标签数组，结果如下：

显然是错误的，每一个句点--线上的两点，都对应于周期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轴只能使用一组标签，解决方法是用数组的每一个值填充两个日期，然后，必须在每个xAxe的"ticks“方法中调用一个回调，该方法将用分隔符分隔日期(在我的示例中是”#“)。

在我们的例子中，我们要显示两个时间段(比如每天的电子商务收入、本周和最后一周)，您的标签数组将类似于：

{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“回调，该回调将详细说明每个标签数组值，这样您就可以拆分并绘制每天正确的日期。

我希望我帮助过你

Answer 2

我知道这是个老问题，但我找到了一个很好的解决方案，那就是使用.net框架。

1-制作一个存储过程，从数据库中获取今年的所有数据，GroupBy数据和月份的前3封信：

 SELECT  sum(anything) AS something ,  MAX ( Convert(char(3), tb.date, 0)) AS ALL_MONTHS 
FROM table tb  WHERE  YEAR(tb.date) = YEAR(CURRENT_TIMESTAMP)    
GROUP BY YEAR(tb.date), MONTH(tb.date)
ORDER BY YEAR(tb.date), MONTH(tb.date)

2-创建存储过程，从数据库中获取去年的所有数据，类似于步骤1，但where子句如下所示：

.(tb.date)=年份(GETDATE())-1.

意味着减去当年。

3-在将数据从控制器发送到视图之后，在view页面中使用JS操作数据。

注意:有12个月，所以要做一个12个月的数组，这样就只能有一个标签，但是数据会根据从js循环函数接收到的索引计算出月份的位置。

/-

   var salesChartCanvas = $('#salesChart').get(0).getContext('2d')

    var months = @Html.Raw(Json.Encode(Model.expChartMonths));
    var total = @Html.Raw(Json.Encode(Model.expChartTotal));
      var Lastmonths = @Html.Raw(Json.Encode(Model.expChartMonthsLast));
    var Lasttotal = @Html.Raw(Json.Encode(Model.expChartTotalLast));

    var arr = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
    var arr2 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

    function getMonthFromString(mon) {
        return new Date(Date.parse(mon + " 1, 2021")).getMonth()
    }

    function getMonth(mon) {
        return new Date(Date.parse(mon + " 1, 2021")).getMonth()
    }
    //this year
    for (var x = 0; x < months.length; x++) { arr2[getMonth(months[x])] = total[x] }
    //last year
    for (var i = 0; i < Lastmonths.length; i++) { arr[getMonthFromString(Lastmonths[i])] = Lasttotal[i] }


    var salesChartData = {
        labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
            datasets: [
                {
                    label: 'This Year Expenses',
                    fill: false,
                    backgroundColor: 'rgba(60,141,188,0.9)',
                    borderColor: 'rgba(60,141,188,0.8)',
                    pointRadius: 5,
                    pointColor: '#3b8bba',
                    pointStrokeColor: 'rgba(60,141,188,1)',
                    pointHighlightFill: '#fff',
                    pointHighlightStroke: 'rgba(60,141,188,1)',
                    data: arr2
                }
            ,
            {
                label: 'Last Year Expenses',
                fill: false,
                backgroundColor: 'rgba(210, 214, 222, 1)',
                borderColor: 'rgba(210, 214, 222, 1)',
                pointRadius: 5,
                pointColor: 'rgba(210, 214, 222, 1)',
                pointStrokeColor: '#c1c7d1',
                pointHighlightFill: '#fff',
                pointHighlightStroke: 'rgba(220,220,220,1)',
                data: arr
            }
        ]
    }