當區域範圍外有不同顏色的Html5折線圖

Question

我想在一個圖上繪製區域範圍圖表和一條線，並且我希望線條在區域範圍內時具有黑色，但在範圍外時具有紅色像圖片上的區域範圍。

我用下面的代碼來繪製arearange，但我不知道如何使它繪製不同顏色的線的時候arearange之外。 http://jsfiddle.net/2cVGX/

 $(function() { 

     var limits = [ 
       [64064, 14.3, 27.7], 
       [64928, 14.5, 27.8], 
       [65792, 15.5, 29.6], 
       [66656, 16.7, 30.7], 
       [67520, 16.5, 25.0], 
       [68384, 17.8, 25.7], 
       [69248, 13.5, 24.8], 
       [70112, 10.5, 21.4], 
       [70976, 09.2, 23.8], 
       [71840, 11.6, 21.8], 
       [72704, 10.7, 23.7], 
       [73568, 11.0, 23.3], 
       [74432, 11.6, 23.7], 
       [75296, 11.8, 20.7], 
       [76160, 12.6, 22.4], 
       [77024, 13.6, 19.6], 
       [77888, 11.4, 22.6], 
       [78752, 13.2, 25.0], 
       [79616, 14.2, 21.6], 
       [80480, 13.1, 17.1], 
       [81344, 12.2, 15.5], 
       [82208, 12.0, 20.8], 
       [83072, 12.0, 17.1], 
       [83936, 12.7, 18.3], 
       [84800, 12.4, 19.4], 
       [85664, 12.6, 19.9], 
       [86528, 11.9, 20.2], 
       [87392, 11.0, 19.3], 
       [88256, 10.8, 17.8], 
       [89120, 11.8, 18.5], 
       [89984, 10.8, 16.1] 
     ], 
      values = [ 
       [64064, 21.5], 
       [64928, 22.1], 
       [65792, 23.0], 
       [66656, 23.8], 
       [67520, 21.4], 
       [68384, 21.3], 
       [69248, 18.3], 
       [70112, 15.4], 
       [70976, 16.4], 
       [71840, 17.7], 
       [72704, 17.5], 
       [73568, 17.6], 
       [74432, 17.7], 
       [75296, 16.8], 
       [76160, 17.7], 
       [77024, 16.3], 
       [77888, 17.8], 
       [78752, 18.1], 
       [79616, 17.2], 
       [80480, 14.4], 
       [81344, 13.7], 
       [82208, 17.7], 
       [83072, 20.6], 
       [83936, 20.3], 
       [84800, 19.3], 
       [85664, 15.8], 
       [86528, 15.2], 
       [87392, 14.8], 
       [88256, 14.4], 
       [89120, 15], 
       [89984, 13.6] 
      ], 

      targets = [ 
       [64064, 22.5], 
       [64928, 23.1], 
       [65792, 21.0], 
       [66656, 22.8], 
       [67520, 20.4], 
       [68384, 22.3], 
       [69248, 18.4], 
       [70112, 15.5], 
       [70976, 16.4], 
       [71840, 17.6], 
       [72704, 18.6], 
       [73568, 19.6], 
       [74432, 18.7], 
       [75296, 17.8], 
       [76160, 17.7], 
       [77024, 16.5], 
       [77888, 16.8], 
       [78752, 17.1], 
       [79616, 17.5], 
       [80480, 15.4], 
       [81344, 14.7], 
       [82208, 16.7], 
       [83072, 15.6], 
       [83936, 15.3], 
       [84800, 15.5], 
       [85664, 15.8], 
       [86528, 15.2], 
       [87392, 15.8], 
       [88256, 15.4], 
       [89120, 15.3], 
       [89984, 14.6] 
      ]; 

     $('#container').highcharts({ 
      title: { 
       text: null 
      }, 
      xAxis: { 
       title: { 
        text: null 
       }, 
       type: 'linear', 
       labels: { 
        enabled: false 
       }, 
       lineWidth: 0, 
       tickWidth: 0 
      }, 

      yAxis: { 
       title: { 
        text: null 
       }, 
       labels: { 
        enabled: false 
       }, 
       gridLineWidth: 0 
      }, 

      tooltip: { 
       crosshairs: true, 
       shared: true, 
       valueSuffix: 'Virt' 
      }, 

      legend: { 
       enabled: false 
      }, 

      series: [{ 
       id: 'valueLine', 
       name: 'Value', 
       type: 'spline', 
       data: values, 
       zIndex: 1, 
       color: 'black', 
       shadow: true, 

       marker: { 
        fillColor: 'black', 
        lineWidth: 1, 
        radius: 2, 
        lineColor: "white", 
        enabled: false, 
        symbol: 'circle' 
       } 
      }, { 
       id: 'targetLine', 
       name: 'Target', 
       type: 'spline', 
       data: targets, 
       linkedTo: 'valueLine', 
       zIndex: 1, 
       color: 'gray', 
       dashStyle: 'DashDot', 
       marker: { 
        fillColor: 'gray', 
        lineWidth: 1, 
        radius: 2, 
        lineColor: "white", 
        enabled: false, 
        symbol: 'circle' 
       } 
      }, { 
       id: 'limitsArea', 
       name: 'Limits', 
       data: limits, 
       type: 'areasplinerange', 
       lineWidth: 1, 
       lineColor: 'gray', 
       linkedTo: 'valueLine', 
       color: "lightGray", 
       fillOpacity: 0.3, 
       zIndex: 0 
      }] 

     }); 

    }); 

Answer 1

遺憾的是它不支持。問題是該行被繪製爲單個路徑，並且每個路徑只能有一種顏色（除了漸變）。

了一些嘗試導致了改變各個點Fiddle1的顏色和另一基於閾值應用漸變到路徑

function applyGraphGradient() { 

    // Options 
    var threshold = 19, 
     colorAbove = '#F00', 
     colorBelow = '#000'; 

    // internal 
    var series = this.series[0], 
     i, 
     point; 

    if (this.renderer.box.tagName === 'svg') { 

     var translatedThreshold = series.yAxis.translate(threshold), 
      y1 = Math.round(series.yAxis.len - translatedThreshold), 
      y2 = y1 + 2; // 0.01 would be fine, but IE9 requires 2 

     // Apply gradient to the path 
     series.graph.attr({ 
      stroke: { 
       linearGradient: [0, y1, 0, y2], 
       stops: [ 
        [0, colorAbove], 
        [1, colorBelow] 
       ] 
      } 
     }); 
    } 


    // Apply colors to the markers 
    for (i = 0; i < series.data.length; i++) { 
     point = series.data[i]; 
     point.color = point.y < threshold ? colorBelow : colorAbove; 
     if (point.graphic) { 
      point.graphic.attr({ 
       fill: point.color 
      }); 
     } 
    } 

    // prevent the old color from coming back after hover 
    delete series.pointAttr.hover.fill; 
    delete series.pointAttr[''].fill; 

} 

fiddle2，榮譽給這個question

另一個可能的行程解決方案是以編程方式將數據分成兩個系列，一個在範圍內，另一個不在範圍內。通過着色不紅它可能會出現在一行

  var inRange = Array(); 
      var outRange = Array(); 

      for(var i = 0; i < values.length; i++) { 
       var range = limits[i]; 
       var value = values[i]; 

       if(value[1] > range[1] && value[1] < range[2]) { 
        inRange.push(value); 
        outRange.push([value[0],null]); 
       } 
       else { 
        outRange.push(value); 
        inRange.push([value[0],null]); 
       } 
      } 

Example，雖然你可以看到他們不聯合起來

UPDATE

管理，使其正確顯示

  var inRange = Array(); 
      var outRange = Array(); 

      var prev = 0; //1 = was valid, 2 = werent 
      for(var i = 0; i < values.length; i++) { 
       var range = limits[i]; 
       var value = values[i]; 

       if(value[1] > range[1] && value[1] < range[2]) { 
        inRange.push(value); 


        if(prev == 2) { 
         outRange.push(value); 
        } 
        else { 
         outRange.push([value[0],null]); 
        } 
        prev = 1; 
       } 
       else { 
        outRange.push(value); 
        inRange.push([value[0],null]); 

        if(prev == 1) { 
         outRange[i-1][5] = values[i-1][6]; 
        } 

        prev = 2; 
       } 

       console.log(prev); 
      } 

Example