浮动图表将线延伸到图表末尾 [英] flot chart extend lines to end of chart

问题描述

我一直试图将图表中的"LineChart"扩展到画布的开头和结尾.但是我没有运气

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

Flot Charts的选项是.

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

barGraph的数据集为

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]]

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

lineGraph的数据集是

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]

[[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..

推荐答案

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

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

但是，问题是，这些新数组项的y值要使用哪些值?您可以使用与倒数第二个值相同的值，以使折线图水平尾部结束.

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.

这篇关于浮动图表将线延伸到图表末尾的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！