2016-12-20 44 views
0

我有"arearange"型线的highchart,例如像动态阈值 - arearange

http://jsfiddle.net/gh/get/jquery/3.1.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/arearange-line/

我想为行使用负面颜色,只要行超出(或越过)范围值。为了达到这个目的,我们可以在"series"属性中使用"threshold"属性,但是我的问题是,我没有一个单独的阈值,当该行超过范围值时,我想以负向颜色绘制该行。

下面是可以在上面的小提琴链接中执行的示例代码。在那里我提到了几个值(例如)被绘制成负面颜色,这在下面的代码中用命令行(“这里我想要一个负面的颜色”)表示。

$(function() { 

    var ranges = [ 
      [1246406400000, 14.3, 27.7], 
      [1246492800000, 14.5, 27.8], 
      [1246579200000, 15.5, 29.6], 
      [1246665600000, 16.7, 30.7], 
      [1246752000000, 16.5, 25.0], 
      [1246838400000, 17.8, 25.7], 
      [1246924800000, 13.5, 24.8], 
      [1247011200000, 10.5, 21.4], 
      [1247097600000, 9.2, 23.8], 
      [1247184000000, 11.6, 21.8], 
      [1247270400000, 10.7, 23.7], 
      [1247356800000, 11.0, 23.3], 
      [1247443200000, 11.6, 23.7], 
      [1247529600000, 11.8, 20.7], 
      [1247616000000, 12.6, 22.4], 
      [1247702400000, 13.6, 19.6], 
      [1247788800000, 11.4, 22.6], 
      [1247875200000, 13.2, 25.0], 
      [1247961600000, 14.2, 21.6], 
      [1248048000000, 13.1, 17.1], 
      [1248134400000, 12.2, 15.5], 
      [1248220800000, 12.0, 20.8], 
      [1248307200000, 12.0, 17.1], 
      [1248393600000, 12.7, 18.3], 
      [1248480000000, 12.4, 19.4], 
      [1248566400000, 12.6, 19.9], 
      [1248652800000, 11.9, 20.2], 
      [1248739200000, 11.0, 19.3], 
      [1248825600000, 10.8, 17.8], 
      [1248912000000, 11.8, 18.5], 
      [1248998400000, 10.8, 16.1] 
     ], 
     averages = [ 
      [1246406400000, 81.5],**//Here i want a negative color** 
      [1246492800000, 22.1], 
      [1246579200000, 3], **//Here i want a negative color** 
      [1246665600000, 23.8], 
      [1246752000000, 21.4], 
      [1246838400000, 21.3], 
      [1246924800000, 18.3], 
      [1247011200000, 15.4], 
      [1247097600000, 16.4], 
      [1247184000000, 17.7], 
      [1247270400000, 17.5], 
      [1247356800000, 17.6], 
      [1247443200000, 17.7], 
      [1247529600000, 16.8], 
      [1247616000000, 17.7], 
      [1247702400000, 16.3], 
      [1247788800000, 17.8], 
      [1247875200000, 18.1], 
      [1247961600000, 17.2], 
      [1248048000000, 14.4], 
      [1248134400000, 13.7], 
      [1248220800000, 15.7], 
      [1248307200000, 34.6],**//Here i want a negative color** 
      [1248393600000, -15.3], 
      [1248480000000, 15.3], 
      [1248566400000, 15.8], 
      [1248652800000, 15.2], 
      [1248739200000, 14.8], 
      [1248825600000, 14.4], 
      [1248912000000, 15], 
      [1248998400000, 90.6] `//Here i want a negative color` 
     ]; 


    Highcharts.chart('container', { 

     title: { 
      text: 'July temperatures' 
     }, 

     xAxis: { 
      type: 'datetime' 
     }, 

     yAxis: { 
      title: { 
       text: null 
      } 
     }, 

     tooltip: { 
      crosshairs: true, 
      shared: true, 
      valueSuffix: '°C' 
     }, 

     legend: { 
     }, 

     series: [{ 
      name: 'Temperature', 
      data: averages, 
      zIndex: 1, 
      marker: { 
       fillColor: 'white', 
       lineWidth: 2, 
       lineColor: Highcharts.getOptions().colors[0] 
      } 
     }, { 
      name: 'Range', 
      data: ranges, 
      type: 'arearange', 
      lineWidth: 0, 
      linkedTo: ':previous', 
      color: Highcharts.getOptions().colors[0], 
      fillOpacity: 0.3, 
      zIndex: 0 
     }] 
    }); 
}); 
+0

应该如何负点着色?它应该为它的标记着色,连接下一个点,前一个点还是两个点?整条线或只有部分在区域之上/之下? – morganfree

回答

1

使用区域或多色系列插件可以给你预期的效果。你也可以在官方的Highcharts论坛找到你的问题的答案:http://forum.highcharts.com/highcharts-usage/arearange-dynamic-threshold-value-change-color-t37236/

$(function() { 
    var ranges = [ 
     [1246406400000, 14.3, 27.7], 
     [1246492800000, 14.5, 27.8], 
     [1246579200000, 15.5, 29.6], 
     [1246665600000, 16.7, 30.7], 
     [1246752000000, 16.5, 25.0], 
     [1246838400000, 17.8, 25.7], 
     [1246924800000, 13.5, 24.8], 
     [1247011200000, 10.5, 21.4], 
     [1247097600000, 9.2, 23.8], 
     [1247184000000, 11.6, 21.8], 
     [1247270400000, 10.7, 23.7], 
     [1247356800000, 11.0, 23.3], 
     [1247443200000, 11.6, 23.7], 
     [1247529600000, 11.8, 20.7], 
     [1247616000000, 12.6, 22.4], 
     [1247702400000, 13.6, 19.6], 
     [1247788800000, 11.4, 22.6], 
     [1247875200000, 13.2, 25.0], 
     [1247961600000, 14.2, 21.6], 
     [1248048000000, 13.1, 17.1], 
     [1248134400000, 12.2, 15.5], 
     [1248220800000, 12.0, 20.8], 
     [1248307200000, 12.0, 17.1], 
     [1248393600000, 12.7, 18.3], 
     [1248480000000, 12.4, 19.4], 
     [1248566400000, 12.6, 19.9], 
     [1248652800000, 11.9, 20.2], 
     [1248739200000, 11.0, 19.3], 
     [1248825600000, 10.8, 17.8], 
     [1248912000000, 11.8, 18.5], 
     [1248998400000, 10.8, 16.1] 
    ], 
    averages = [{ 
     x: 1246406400000, 
     y: 81.5, 
     segmentColor: Highcharts.getOptions().colors[3], 
     marker: { 
      fillColor: Highcharts.getOptions().colors[3] 
     } 
     }, 
     [1246492800000, 22.1], 
     [1246579200000, 23], 
     [1246665600000, 23.8], 
     [1246752000000, 21.4], 
     [1246838400000, 21.3], 
     [1246924800000, 18.3], 
     [1247011200000, 15.4], 
     [1247097600000, 16.4], 
     [1247184000000, 17.7], { 
     x: 1247270400000, 
     y: 17.5, 
     segmentColor: Highcharts.getOptions().colors[3] 
     }, { 
     x: 1247356800000, 
     y: 77.6, 
     segmentColor: Highcharts.getOptions().colors[3], 
     marker: { 
      fillColor: Highcharts.getOptions().colors[3] 
     } 
     }, 
     [1247443200000, 17.7], 
     [1247529600000, 16.8], 
     [1247616000000, 17.7], 
     [1247702400000, 16.3], 
     [1247788800000, 17.8], 
     [1247875200000, 18.1], 
     [1247961600000, 17.2], 
     [1248048000000, 14.4], 
     [1248134400000, 13.7], 
     [1248220800000, 15.7], { 
     x: 1248307200000, 
     y: 14.6, 
     segmentColor: Highcharts.getOptions().colors[3], 
     }, { 
     x: 1248393600000, 
     y: -5, 
     segmentColor: Highcharts.getOptions().colors[3], 
     marker: { 
      fillColor: Highcharts.getOptions().colors[3] 
     } 
     }, 
     [1248480000000, 15.3], 
     [1248566400000, 15.8], 
     [1248652800000, 15.2], 
     [1248739200000, 14.8], 
     [1248825600000, 14.4], 
     [1248912000000, 15], 
     [1248998400000, 13.6] 
    ]; 

    Highcharts.chart('container', { 
    title: { 
     text: 'July temperatures' 
    }, 
    xAxis: { 
     type: 'datetime' 
    }, 
    yAxis: { 
     title: { 
     text: null 
     } 
    }, 
    tooltip: { 
     crosshairs: true, 
     shared: true, 
     valueSuffix: '°C' 
    }, 
    series: [{ 
     name: 'Temperature', 
     data: averages, 
     type: 'coloredline', 
     zIndex: 1, 
    }, { 
     name: 'Range', 
     data: ranges, 
     type: 'arearange', 
     lineWidth: 0, 
     linkedTo: ':previous', 
     color: Highcharts.getOptions().colors[0], 
     fillOpacity: 0.3, 
     zIndex: 0 
    }] 
    }); 
}); 

API参考:

http://api.highcharts.com/highcharts/series%3Cline%3E.zones

例子:

http://jsfiddle.net/k1bL3umw/ - 使用区域

http://jsfiddle.net/q0uh8z34/ - 使用多色彩系列插件