在时间线图表中填充从一个点到另一个点区域的不同颜色

时间:2013-04-04 07:05:10

标签: highcharts highstock

在时间线图表中是否有办法从一个点到另一个点填充不同的颜色,具体取决于y的值?

在此示例http://jsfiddle.net/highcharts/PMyHQ/

我想应用以下规则:

  1. y< = 2 =填充颜色为蓝色
  2. y< = 5 =填充红色
  3. y< = 9 =填充黄色
  4. 所以:

    1. 四月到五月区域颜色应为蓝色
    2. 5月至6月区域颜色应为红色
    3. 6月至7月区域颜色应为黄色
    4. jsfiddle代码:

      function applyGraphGradient() {
      
      // Options
      var threshold = 0,
          colorAbove = '#EE4643',
          colorBelow = '#4572EE';
      
      // 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 gradient to the area
          if (series.area) {
              series.area.attr({
                  fill: {
                      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;
      
      }
      
      // Initiate the chart
      var chart = new Highcharts.Chart({
      
      chart: {
          renderTo: 'container',
          events: {
              load: applyGraphGradient
          },
          type: 'area'
      },
      
      title: {
          text: 'Average monthly temperature'
      },
      
      yAxis: {
          plotLines: [{
              value: 0,
              color: 'silver',
              width: 2,
              zIndex: 2
          }],
          title: {
              text: 'Temperature (°C)'
          }
      },
      
      xAxis: {
          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
      },
      
      series: [{
          name: 'Temperature (°C)',
          data: [-2, -3, -2, 2, 5, 9, 11, 11, 10, 8, 4, -1]
      }]
      
      });
      

      是否有计划支持在折线图中对特定区域(以x和y坐标为界)应用不同颜色的能力,可能是为了将来的版本?

0 个答案:

没有答案