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 
     }], 
    },