Highcharts造型问题

Question

我希望能为造型线Highchart提供一些帮助。

我想在这里得到图表看起来像图像：

Example of my graph

但我挣扎着爬块彩色标贴？

任何帮助将不胜感激！

感谢

$('#container').highcharts({ 
     chart: { 
      type: 'line', 
      plotBackgroundImage: 'images/fibre.jpg', 
      plotBorderWidth: 0, 


      /*, 
      marginRight: 130, 
      marginBottom: 25*/ 
     }, 
     title: 
     { 
      text : strTitle 
     }, 
     tooltip: 
     { 
      enabled: false 
     }, 
     xAxis: 
     { 
      categories: arrXAxis,    
      title: 
      { 
       text: strXTitle 
      }, 

     },   
     yAxis: 
     { 
      title: 
      { 
       text: '' 
      }, 
      labels: { 
       formatter: function() { 
        // return this.value +'?' 
        return(''); 
       } 
      }, 
      min: 0, 
      max: 10, 
      minorGridLineWidth: 0, 
      alternateGridColor: null, 
      gridLineWidth: 0, 
      plotBands: 
      [{ 
       from: intRedStart, 
       to: intRedEnd, 
       color: 'rgba(229, 28, 36, 0.6)', 
       label: 
       { 
        text: 'High Risk', 
        style: 
        { 
         color: '#606060' 
        } 
       } 
      }, 
      { 
       from: intAmberStart, 
       to: intAmberEnd, 
       color: 'rgba(239, 140, 30, 0.6)', 
       label: 
       { 
        text: 'Improvement', 
        style: 
        { 
         color: '#606060' 
        } 
       } 
      }, 
      { 
       from: intGreenStart, 
       to: intGreenEnd, 
       color: 'rgba(43, 174, 115, 0.6)', 
       label: 
       { 
        text: 'Healthy', 
        style: 
        { 
         color: '#606060' 
        } 
       } 
      } 


      ] 
     }, 
     legend: { 
      /* 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'top', 
      x: -10, 
      y: 100, 
      borderWidth: 0*/ 
     }, 
     series: 
     [{ 
      allowPointSelect: false,  
      showInLegend: false, 
      data: arrData 
     } /*, { 
       name: '1', 
       data: [10] 
      }, { 
       name: '2', 
       data: [0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] 
      }, { 
       name: '3', 
       data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] 
      }*/] 
    }); 

Answer 1

如果你看一下API doc for plotband labels，我想你应该能够通过玩弄的“风格”，“对齐”和“verticalAlign”的属性做类似图像的东西。希望这有助于:)

编辑：这似乎是背景颜色不可能设置与labels.style对象。我想这是因为标签是一个SVG元素（更具体的tspan），所以它不支持标准HTML元素所做的所有CSS。然而，您可以通过对齐“顶部”和“左侧”标签并设置字体颜色来更接近您的目标。如果你真的需要的背景颜色，你可以看看这个：Background color of tspan element

Answer 2

您可以为图表http://api.highcharts.com/highcharts#chart.plotBackgroundImage设置plotBackgroundImage然后用plotBands http://jsfiddle.net/JRhaS/2/

plotBands: [{ // mark the weekend 
      color: 'rgba(155,255,155,0.5)', 
      from: 0, 
      to: 100 
     },{ // mark the weekend 
      color: 'rgba(100,255,200,0.5)', 
      from:100, 
      to: 200 
     }], 
    },