2014-11-25 71 views
0

我想以動態地改變的僅其中一列的邊框的寬度和顏色的基本柱形圖類似於以下:HighCharts:設置特定的邊界的寬度和動態邊框顏色一個列

var chartingOptions = { 
chart: { 
    renderTo: 'container', 
    type: 'column' 
}, 
xAxis: { 
    categories: ['5:1', '4:1', '3:1', '2:1', '1:1', '1:2', '1:3', '1:4', '1:5'] 
}, 
plotOptions: { 
    column: {   
     grouping: false 
    } 
}, 
series: [ 
    { 
    name: 'Serie 2', 
    data: [20, 24, 30, 40, 60, 80, 90, 96, 100]}, 
{ 
    name: 'Serie 1', 
    data: [100, 96, 90, 80, 60, 40, 30, 24, 20]} 
      ] 
}; 

var chart = new Highcharts.Chart(chartingOptions); 

JSFIDDLE here。

我試圖通過

chart.series[0].data[2].series.borderColor = 'black' 

,以改變它直接在意甲第一,但它不更新意甲。任何幫助!

回答

5

您需要參考SVG元素並操作strokestroke-width參數。

例如:http://jsfiddle.net/usLuzrwn/3/

+0

這正是我需要的。我也嘗試用borderWidth,但它不起作用。任何想法爲什麼? – RockridgeKid 2014-11-25 18:47:19

+0

看到我的新答案,最好是編輯圖形元素,因爲只能在整個系列中更新邊框,而不是每個特定點。所以請檢查解決方法。 – 2014-11-26 09:01:27

+0

此解決方案存在問題 - 如果將鼠標懸停在列上,則會重置邊框顏色。順便說一句,花了我一段時間才意識到我需要點擊「更新」按鈕! :) 謝謝! – Leonya 2015-10-22 16:38:21

0

chart.series[0].data[2].series.borderColor = 'black'不會做任何事情。請嘗試 chart.series[0].data[2].series.color = 'black'但這也會改變工具提示的顏色。

爲了改變一列的顏色明確地嘗試爲

data: [{ name: 'Point 1', color: '#00FF00', y: 0 }, { name: 'Point 2', color: '#FF00FF', y: 5 }]

有關更多信息,請點擊這裏http://api.highcharts.com/highcharts#series.data.color

你可以參考這個[小提琴] http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/column-bordercolor/

+0

謝謝,但這不能回答我的問題。這會更改顏色,無論邊框寬度還是邊框顏色。我更明確地提出了我的問題。 – RockridgeKid 2014-11-25 09:31:54

0

的邊框顏色和邊框寬度屬性可用於系列對象而不適用於數據對象。正如我所提到的,你可以在上面的鏈接中查看相同的文檔。

但是,您可以通過在highcharts.js的源代碼中定義這些屬性來強制數據對象具有borderColor和borderWidth。

希望此信息有幫助。

+0

不要重複的答案,因爲你可以編輯一個並添加任何細節。 – 2014-11-25 12:28:25

+0

是的,會考慮。 – arachnid 2014-11-25 12:54:46

相關問題