Chart.js如何在“时间”类型图表中将gridLines修复为图表?

时间:2017-04-25 09:01:53

标签: javascript jquery charts chart.js

我用'时间'的xAxes tipe制作了散点图。由于它是'时间'X gridLines停止附加到图表。我正在使用平移附加组件,因此我可以拖动图表,当每次拖动图表时网格线都会跳过时,它看起来很奇怪。

向左拖动之前 enter image description here

我想2017年5月1日还在这里。而不是出现新的gridLines。 enter image description here

我看起来像......

gridLines: {
  positionFixed: true;
}

这是图表:

//CREATING DATE
function newDate(days){
        return moment().add(days, 'd');
}


//VARIABLES TO CHANGE X SCALE (month/week/day)
var xAxisTimeMin = newDate(0);
var xAxisTimeMax = newDate(30);

//CREATING CHART
function ChartDraw(){
    const CHART = document.getElementById("lineChart");
    
    //creating data fot scatter chart
    var scatterData = {
        datasets:[{
            label: "uuuu",
            data:[
            {
                x: newDate(0),
                y: 1409
            },
            {
                x: newDate(1),
                y: 1400
            },
            {
                x: newDate(2),
                y: 1405
            },
            {
                x: newDate(3),
                y: 1415
            },
            {
                x: newDate(4),
                y: 1460
            },
            {
                x: newDate(5),
                y: 1420
            },
            {
                x: newDate(6),
                y: 1470
            },
            {
                x: newDate(7),
                y: 1530
            },
            {
                x: newDate(8),
                y: 1420
            },
            {
                x: newDate(9),
                y: 1400
            },
            {
                x: newDate(10),
                y: 1405
            },
            {
                x: newDate(11),
                y: 1409
            },
            {
                x: newDate(12),
                y: 1401
            },
            {
                x: newDate(13),
                y: 1408
            },
            {
                x: newDate(14),
                y: 1402
            },
            {
                x: newDate(16),
                y: 1409
            },
            {
                x: newDate(17),
                y: 1402
            }
        ],
            borderColor: "rgba(255,255,255,.7)",
            fill: true,
            backgroundColor: "rgba(0,0,0,.3)",
    }
    ]
    };
    myChart = new Chart.Scatter(CHART, {
    type: 'line',
    data: scatterData,
    options: {
        tooltips: tooltips,
        scales: {
            
            xAxes: [{
                type: 'time',
                time: {
                    displayFormats:{
                    },
                    min: xAxisTimeMin,
                    max: xAxisTimeMax,
                },
                gridLines: {
                    color: "rgba(255, 255, 255, 0.5)",
                    drawBorder: false,
                    lineWidth: 1,
                    zeroLineWidth: 1,
                    zeroLineColor: "rgba(255,255,255,0.5)"
                },
               ticks: {
                    maxRotation: 0,
               }
                }],
            yAxes: [{
                gridLines: {
                    color: "rgba(255, 255, 255, 0.5)",
                    drawBorder: false,
                    lineWidth: 1,
                },
                ticks:{
                    padding: 10,
                    min: 1300,
                    max: 1600,
                }
                }]
        },
        pan:{
            enabled: true,
            mode: 'x',
            limits: {
                min: 0,
            }
        },
        zoom:{
            enabled: false,
        }
    }
});
}

提前致谢。

0 个答案:

没有答案