在 Highcharts/Highstock 中正确绘制时间序列

Question

我收集了大量格式为 [1421065200000, 1.72] 的数据，其中第一个参数是以毫秒为单位的时间，第二个参数是特定时间的值。我有包含此类数据的大数据数组。现在我想要包含此类时间和价值数据图的可滚动图表。这是我的 javascript 实现，

var dataArray; //This contains my data array i.e. ([[t1, v1],[t2, v2],...])

var minDate = dataArray[0][0];
var maxDate = dataArray[dataArray.length - 1][0];

var chartOption = {
        chart: {
            type: graphType,
            renderTo: 'graph-container',
            zoomType: 'x',
            useUTC: false
        },
        title: {
            text: 'Data from last 24 hours'
        },
        credits : {
            enabled: false
        },
        xAxis: {
            title: {
                text: null
            },
            type: 'datetime',
            dateTimeLabelFormats: {
                second: '%Y-%m-%d<br/>%H:%M:%S',
                minute: '%Y-%m-%d<br/>%H:%M',
                hour: '%Y-%m-%d<br/>%H:%M',
                day: '%Y<br/>%m-%d',
                week: '%Y<br/>%m-%d',
                month: '%Y-%m',
                year: '%Y'
            },
            allowDecimals: false,
            ordinal: false,
            min: minDate,
            max: maxDate
        },
        yAxis: {
            title: {
                text: null
            }
        },
        plotOptions: {
            series: {
                pointStart: minDate,
                pointInterval: 5 * 60 *1000
            }
        },
        series: [{
            name: parameterName,
            data: dataArray
        }],
        exporting: {
            enabled: false
        }
    };

    parameterChart = new Highcharts.Chart(chartOption);
}

图表显示的数据不正确，x 轴上的时间值与 y 轴上的值不匹配。显示此类时间序列的最正确和最有效的方法是什么。我应该使用 Highcharts 还是 Highstock。请指导我解决这个问题，提出建议或解决方案。

Answer 1

我所做的是，我使用 HighStock 而不是 HighCharts（因为我需要沿 x 轴滚动条来收集大量数据）。我以本地时区格式传递日期，而图表使用的是 UTC。因此，我禁用了 UTC（替代方案：我可以提供 UTC 数据并使用相同的方式绘制图形，在我的例子中，我需要我的本地标签）。我通过 x 轴最小和最大配置将最小和最大范围赋予了 x 轴。这是我的代码示例，

//dataArray contains the array of data [[x1, y1], [x2, y2], ...]
//x is Date, y is temperature value (say)

var minDate = dataArray[0][0];
var maxDate = dataArray[dataArray.length - 1][0];

//Disable use of UTC
Highcharts.setOptions({
    global: {
        useUTC: false
    }
});

//Create graph options
var chartOption = {
    chart: {
        type: graphType, //line, bar, column, etc
        renderTo: 'graph-container', //div where my graph will be drawn
        zoomType: 'x' //Making x-axis zoomable/scrollable
    },
    title: {
        text: 'Data from last 6 hours'
    },
    subtitle: {
        text: document.ontouchstart === undefined ?
            'Click and drag in the plot area to zoom in' :
            'Pinch the chart to zoom in'
    },
    xAxis: {
        title: {
            text: null
        },
        type: 'datetime', //For time series, x-axis labels will be time
        labels: {
            //You can format the label according to your need
            format: '{value:%H:%m}'
        },
        min: minDate,
        max: maxDate,
        minPadding: 0.05,
        maxPadding: 0.05
    },
    yAxis: {
        title: {
            text: null
        }
    },
    scrollbar: {
        enabled: true
    },
    series: [{
        name: "Temperature", //Name of the series
        data: dataArray
    }],
    exporting: {
        enabled: false
    },
    credits : {
        enabled: false
    }
};

//Finally create the graph
var myChart = new Highcharts.Chart(chartOption);

在 Highcharts/Highstock 中正确绘制时间序列

Correctly plot time series in Highcharts/Highstock

javascript

jquery

highcharts

timeserieschart

highstock