2014-05-09 205 views
2

我有使用Highcharts.js製作的柱形圖。點擊一個條,它的顏色變成橙色。但是當單擊另一個欄時,先前單擊的欄的顏色將保持橙色。Highcharts - 只改變點擊列的顏色

我想要的是,點擊一個酒吧,所有其他酒吧的顏色應該變成默認。

$('#container').highcharts({ 
    chart: { 
     type: 'column' 
    }, 
    xAxis: { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    }, 

    plotOptions: { 
     series: { 
      point: { 
       events: { 
        click: function(event) { 
         console.log(this); 
         this.update({ color: '#fe5800' }, true, false); 
         } 
       } 
      } 
     } 
    }, 

    series: [{ 
     data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
    }] 
}); 

小提琴鏈接 - Demo

在此先感謝。

回答

2

jsfiddle

var series = chart.series[0]; 
series.color = "#FF00FF"; 
chart.legend.colorizeItem(series, series.visible); 
$.each(series.data, function(i, point) { 
    point.graphic.attr({ 
     fill: '#FF00FF' 
    }); 
}); 
series.redraw(); 
+0

後第二次點擊只需移動鼠標左,右看看效果 –

+1

更新撥弄鏈接 – Dave

+0

現在它的罰款... –

5

您可以保存對前一個小節的引用,並在單擊下一個小節時還原前一小節的顏色。

$(function() { 
    var previousPoint = null; 
    $('#container').highcharts({ 
     chart: { 
      type: 'column' 
     }, 
     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
     }, 

     plotOptions: { 
      series: { 
       point: { 
        events: { 
         click: function(event) { 
          console.log(this); 
          if (previousPoint) { 
           previousPoint.update({ color: '#7cb5ec' }); 
          } 
          previousPoint = this; 
          this.update({ color: '#fe5800' }); 
          } 
        } 
       } 
      } 
     }, 

     series: [{ 
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
     }] 
    }); 

}); 

http://jsfiddle.net/amyamy86/Xm4vW/1/

4

更新在2017年:

現在有一個built'in辦法做到這一點:

series: [{ 
     name: 'John', 
     data: [5, 3, 4, 7, 2, -1, -2, -3], 
     color: 'steelblue', 
     negativeColor: 'indianred', 
     states: { 
      select: { 
       color: 'blue' 
      } 
     }, 
     allowPointSelect: true 
    }] 

Fidd樂:http://jsfiddle.net/nk1v22du/

+0

謝謝!尼斯小提琴。這個功能的官方文檔並不好。我發現我也可以指定「select:{borderWidth:4,borderColor:'#DDDDDD'}」。這也將響應數據,例如[{y:123,selected:true}]。如果我重新啓動圖表等,我需要這樣做。 – Turbo