Question

请亲自解读Highcharts方法。

我输入的数据是很多记录，包含三个字段（timestamp，min，max），我想从中生成一个图。目标是在这一块情节中有两条线，一条是max-vs-time而另一条是min-vstime。

我有一个区域范围可以工作(fiddle here)但是如果我将绘图类型更改为样条曲线，我只得到一个最小值与时间的折线图（即忽略最后一个数据参数）。

当我弄乱Highcharts区域范围的例子时，同样的事情发生了，所以我猜测我的系列没有正确定义，但是我没有破译正确的术语来弄清楚如何问这个问题我猜。任何帮助表示赞赏....

// data is timestamp,min,max for the day
// - this currently plots only the min for each day
// - intent is two lines, one for min and one for max

var data = [
    [1186124400000, 57.2, 75.6],
    [1186210800000, 51.8, 74.7],
    [1186297200000, 53.8, 74.8],
    [1186383600000, 56.7, 72.7],
    [1186470000000, 59.0, 76.1]
];

var options = {
    chart: {
       renderTo: 'container',
       type: 'arearange'
    },
    title: {
       text: 'historical temperatures'
    },
    xAxis: {
       type: 'datetime'
    },
    yAxis: {
       title: {
            text: 'outsideTemp (F)'
        }
    },
    legend: {
        enabled: false
    },
    series: [{
        legend: {
            enabled: false
        },
        data: data
    }]


};

    $(document).ready(function () {
    var chart1 = new Highcharts.Chart(options)


});

Answer 1

您需要创建两个单独的系列。

所以这个：

var data = [
    [1186124400000, 57.2, 75.6],
    [1186210800000, 51.8, 74.7],
    [1186297200000, 53.8, 74.8],
    [1186383600000, 56.7, 72.7],
    [1186470000000, 59.0, 76.1]
];

需要是两个独立的数组，每个数组都有一个y值，并且x值相同：

var data1 = [
    [1186124400000, 57.2],
    [1186210800000, 51.8],
    [1186297200000, 53.8],
    [1186383600000, 56.7],
    [1186470000000, 59.0]
];
var data2 = [
    [1186124400000, 75.6],
    [1186210800000, 74.7],
    [1186297200000, 74.8],
    [1186383600000, 72.7],
    [1186470000000, 76.1]
];

更新了Fiddle：

http://jsfiddle.net/jlbriggs/5q5HJ/12/

如果x值的间隔一致，则可以使用pointStart和pointInterval属性并跳过指定x值

highcharts在绘图上将区域范围转换为多行

1 个答案: