图表将线条延伸到图表末尾

Question

我一直在尝试将图表中的 "LineChart" 扩展到 canvas 的开头和结尾。但是我运气不好

图表的选项是。

///initialize default chart options
chartCtx.options = {
    grid: {
        hoverable: true,
        clickable: true,
        tickColor: "#d5d5d5",
        borderWidth: 0,
        color: '#d5d5d5'
    },
    colors: ["#1ab394", "#464f88"],
    tooltip: true,
    xaxis: {
        mode: "time",
        timezone: "browser",
        tickSize: [5, 'minute'],
        tickLength: 0,
        axisLabel: "Minutes",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Arial',
        axisLabelPadding: 10,
        color: "#d5d5d5"
    },
    yaxes: [
        {
            position: "left",
            max: 2370,
            color: "#d5d5d5",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Arial',
            axisLabelPadding: 3
        },
        {
            position: "right",
            color: "#d5d5d5",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: ' Arial',
            axisLabelPadding: 67,
            tickFormatter: function (x) {
                return x;
            }
        }
    ],
    legend: {
        noColumns: 2,
        labelBoxBorderColor: "#d5d5d5",
        position: "sw",
        margin:[0 , -40]
    }
};

//init default chart dataset
chartCtx.dataset = [
    {
        label: chartCtx.Bar.Label,
        data: chartCtx.Bar.Dataset,
        color: "#1ab394",
        bars: {
            show: true,
            align: "center",
            barWidth: 5 * 60 * 600,
            lineWidth:1
        }
    },
    {
        label: chartCtx.Line.Label,
        data: chartCtx.Line.Dataset,
        yaxis: 2,
        color: "#464f88",
        lines: {
            lineWidth: 1,
            show: true,
            fill: true,
            fillColor: {
                colors: [
                    {
                        opacity: 0.2
                    },
                    {
                        opacity: 0.2
                    }
                ]
            }
        },
        points : {
            show : true ,
            radius : 4
        }
    }
];

条形图的数据集是

[[1439351830973,464],[1439352130973,574],[1439352430973,177],[1439352730973,784],[1439353030973,902],[1439353330973,2586],[1439353630973,7061],[1439353930973,1091],[1439354230973,2451],[1439354530973,182],[1439354830973,3557]]

折线图的数据集是

[[1439351830973,936],[1439352130973,619],[1439352430973,1981],[1439352730973,448],[1439353030973,297],[1439353330973,982],[1439353630973,5606],[1439353930973,5865],[1439354230973,1979],[1439354530973,4495],[1439354830973,2305]]

你们能给我指出正确的方向吗？谢谢..

Answer 1

您正在将线条映射到具有相同 x 值的条形。

您可以在折线图数组的开头和结尾添加两个值，使其超出 canvas。

var buffer = 5 * 60 * 600; // or whatever number to change the timestamp

[[1439351830973-buffer,936] // new array element
[[1439351830973,936],[1439352130973,619],[1439352430973,1981],[1439352730973,448],[1439353030973,297],[1439353330973,982],[1439353630973,5606],[1439353930973,5865],[1439354230973,1979],[1439354530973,4495],[1439354830973,2305]],
[1439354830973+buffer,2305]] // new array element

但接下来的问题是，这些新数组项的 y 值应使用哪些值？您可以使用与倒数第二个值相同的值，以便折线图水平收尾。

图表将线条延伸到图表末尾

flot chart extend lines to end of chart

javascript

jquery

flot