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

我收集了大量数据，格式为[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。请带着建议或解决方案指导我完成这项工作。

我所做的是，我使用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);

---

你能把你的例子重新制作成现场演示，包括硬处理数据吗？@SebastianBochan我已经解决了我的问题，我已经提供了我找到的源代码。不过，我将添加一个带有硬编码数据的实时演示。感谢您的关注：