Chart.js折线图重叠线解决方案

时间:2019-07-08 08:48:10

标签: chart.js

我需要在折线图上显示一些数据。有3个数据集(值范围从0到4)。问题在于3个数据集的值相同,因此线段重叠。

var ctx = $("#myChart");

var chart = new Chart(ctx, {
            type: 'line',
            data: {
                labels:  ["11/05/2019", "21/05/2019"],
                datasets: [
                    {
                        label: 'Action 1',
                        backgroundColor: '#B22222',
                        borderColor: '#B22222',
                        //backgroundColor: myColors_act1,
                        data: [0,0],
                        fill: false,
                        pointRadius: 5,
                        pointHoverRadius: 10,
                        showLine: true
                    },
                    {
                        label: 'Action 2',
                        backgroundColor: '#043947',
                        borderColor: '#043947',
                        //backgroundColor: myColors_act2,
                        data: [0,0],
                        fill: false,
                        pointRadius: 5,
                        pointHoverRadius: 10,
                        showLine: true
                    },
                    {
                        label: 'Action 3',
                        backgroundColor: '#111E6C',
                        borderColor: '#111E6C',
                        //backgroundColor: myColors_act3,
                        data: [0,0],
                        fill: false,
                        pointRadius: 5,
                        pointHoverRadius: 10,
                        showLine: true
                    }
                ]
            },
            options: {
                hover: {
                    mode: 'point',
                    intersect: false
                },
                responsive: true,
                maintainAspectRatio: false,
                legend: { position: 'right' },
                elements: {
                    point: {
                        pointStyle: 'circle',
                    },
                    line: {
                        tension: 0
                    }
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true,
                            callback: function (value) { if (value % 1 === 0) { return value; } },
                            suggestedMax: 4.1,
                            display: false //this will remove only the label
                        }
                    }],
                    xAxes: [{ gridLines: { display: false } }]
                }
            }
        });

Codepen

我试图通过在第一个数据集的所有值(例如0.2)上加一个x值来解决这个问题,而在第三个数据集上,我做的事情与第一个数据集相同,但是我没有加相同的x数量。

0 个答案:

没有答案