0

我收集了大量格式为 [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。请通过建议或解决方案指导我。

4

1 回答 1

0

我所做的是，我使用 HighStock 而不是 HighCharts（因为我需要沿 x 轴滚动条来收集大量数据）。我以本地时区格式传递日期，而图表使用 UTC。因此，我禁用了 UTC 的使用（替代方案：我可以提供 UTC 数据并使用相同的数据绘制图表，在我的情况下，我需要我的本地标签）。我通过 x 轴 min 和 max 配置给出了 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);
于 2015-01-21T11:00:26.223 回答