更改圖表系列填充顏色在highcharts

Question

圖像如圖所示，我想點改變填充顏色（在我的案件涉及的項目狀態的話）， visual for my chart

代碼到目前爲止，我已經習慣了實現這一目標是低於，

$(function() { 
    $('#ao-projectssummry-chart').highcharts({ 
     type: "spline", 
     title: null, 
     borderRadius : null, 
     xAxis: { 
      categories: ['May2016', 'June2016', 'July2016', 'August2016', 'september2016', 'November2016'], 
      opposite: true 
      //type: 'datetime', 
      //min: Date.UTC(2011, 4, 31), 
      //max: Date.UTC(2012, 11, 6) 
     }, 
     yAxis: { 
      min: 0, 
      max: 5, 
      title : null 
     }, 
     plotOptions: { 
      series: { 
       lineWidth: 20, 
       borderRadius: null, 
       radius: 0 
      }, 
      marker: { 
       radius : 0 
      } 

     }, 
     credits : { 
      enabled : false 
     }, 
     legend: { 
      enabled : false 
     }, 

     series: [{ 
      name: "Project 1", 
      data: [1, 1, { 
       y: 1, 
          marker: { 
           symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)', 
           overlapping: true 
          } 
       }, { 
        y: 1, 
          marker: { 
           symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)' 
          } 
       }, { 
        y: 1, 
        marker: { 
         symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)' 
        } 
       } 
       ] 
     }, 
     { 
      name: "Project 2", 

      data: [2, { 
       y: 2, 
       marker: { 
        symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)', 
        overlapping : true 
       } 
      }, 2, 2, 2, { 
       y:2, 
       marker: { 
        symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)', 
        overlapping: true 
       } 
      }, 
      ] 
     }] 
    }); 
}); 

那麼，我該如何改變plotoption顏色的點？我怎樣才能實現圖片中顯示的背景線？

任何幫助，將不勝感激！提前致謝。

Answer 1

好了，看來問題比我讀它作爲不同第一次。您不想更改點標記的顏色，而是要更改標記之間的線段顏色。

以下是一種實現您所要求的方法，使用columnrange系列類型而不是一條線。這允許更多的靈活性和控制。

的想法：

首先，設置類型，和反轉圖表（columnrange是垂直系列類型;以使其水平，翻轉圖表 - 現在的x軸是垂直軸，並y軸現在是水平軸）：

chart: { 
    type: "columnrange", 
    inverted: true 
} 

相應地更新軸設置（swap x for y）。

使用x值，low值（起點）和high值（終點）來設置您的數據。

顏色設置爲任何你想要的：

data: [{ 
    x: 1, 
    low: Date.UTC(2016,3,15), 
    high: Date.UTC(2016,4,21), 
    color: 'rgb(0,156,255)' 
},{ 
    x: 3, 
    low: Date.UTC(2016,2,7), 
    high: Date.UTC(2016,6,15), 
    color: "rgb(204,0,0)" 
}] 

要放置標記，添加一個單獨的系列，無論是線或散射（我用線，用lineWidth: 0，因爲散射系列使用不同的工具提示模型，並且如果工具提示對您很重要，那麼與其他系列的集成並不容易，但否則，兩者的工作方式都是一樣的）。

標記系列：

{ 
    name: 'Markers', 
    type: 'line', 
    data: [ 
    { 
    x: 1, 
    y: Date.UTC(2016,2,15), 
    marker: { 
     fillColor:"#9CCB00" 
    } 
    } 

實施例：

• https://jsfiddle.net/jlbriggs/x7c3t81n/

輸出：

Answer 2

你需要指定的data陣列直接：

示例代碼：您可以在影響數據點的plotOptions指定

data: [5,4,3,2,5,6,7,9, {y:6, marker: { enabled: true, radius: 10, fillColor: 'red'}},3,2,5,6,7] 

任何東西，你可以在這個指定一種特定數據點的方式。

您不指定任何內容的任何點都遵循默認選項或plotOptions中指定的選項。

小提琴：

• http://jsfiddle.net/jlbriggs/3d3fuhbb/126/

輸出：