flot chart extend lines to end of chart

问题

I have been trying to extend the "LineChart" in the chart to beginning and the end of the canvas. But i am having no luck with it

The options for Flot Charts are .

///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
        }
    }
];

Dataset for barGraph is

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

Dataset for the lineGraph is

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

Could you guys point me in the right direction. Thanks..

回答1:

You're mapping the line to the bars with the same x-values.

You could add two more values to the beginning and end of your line graph array, so it extends beyond the 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

But then the question is, which values to use for the y-values on these new array items? You could use the same value as the penultimate values so the line graph tails off horizontally.

来源：https://stackoverflow.com/questions/32063222/flot-chart-extend-lines-to-end-of-chart