簡體   English   中英

Highcharts氣泡圖,帶有更新的默認顏色

[英]Highcharts bubble chart with updating default colors

Highcharts庫具有默認的顏色數組:

http://api.highcharts.com/highcharts/colors

colors: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', 
   '#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1']

您可以在“初始化”中將其設置為所需的任何值。

我的問題:“初始化后”,如何更新顏色陣列並“重繪”圖表?

對於單個系列,我發現我可以通過一些復雜的操作來更新顏色...

chart.series[0].update({
                                            color: {
                                                radialGradient: { cx: .5, cy: .6, r: .25 },                                                 
                                                stops: [
                                                       [0, '#ffffff'],
                                                       [1, '#73ff96']
                                                    ]
                                                }
                                            }, true);

但是氣泡圖有一個“默認”邊框和“填充”,我似乎無法復制。

http://www.highcharts.com/docs/chart-design-and-style/colors

因此,基本問題可能是:氣泡圖在內部與“顏色”數組一起使用以構建特定系列“顏色”屬性的默認填充/不透明度設置是什么? 什么是“顏色”屬性?

更新

澄清如下:基於@morganfree答案。 應用於單點,系列信息就正確了。

在下面,//取消選擇將恢復為正確的顏色,但是當應用於單個點時,顏色變為帶有參量的灰色,而不是此紅色的“突出顯示”

// unselect points
            var points = chart.getSelectedPoints(); 
                    if (points.length > 0) {
                        Highcharts.each(points, function (point) {
                            point.select(false);
                            point.update({color: '#7cb5ec'}); // default color
                        });
                    }
            // select current point     
            if(idx != -1)
                {               
                chart.series[0].data[idx].select(true);
                chart.series[0].data[idx].update({color: '#f45b5b'},true); // highlight color
                }

http://fiddle.jshell.net/mshaffer/h39e2z0o/

請注意,select元素會變灰,我相信其中的默認參數

plotOptions: {
        series: {
        allowPointSelect: true
        },

為“標記”

http://api.highcharts.com/highcharts/plotOptions.series.marker

“標記”是否允許這種動態重新着色?

還要注意,如果我對元素進行隨機化,然后更改系列顏色,則系列中的“隨機化”元素不會變回正確的顏色。

更新2

看來plotOptions中的“氣泡”和“系列”事件發生沖突? 點擊還是選擇?

如果要在初始化后更改系列的顏色,則必須遍歷系列並更新其顏色-顏色的默認“感覺”將被保留。

chart.series.forEach(function (series, i) {
  series.update({
    color: colors[colors.length - i - 1]
  }, false, false);
});
chart.redraw();

例如: http//fiddle.jshell.net/mp27yb75/2/

特定氣泡的顏色是從系列顏色繼承的,但是,如果您為該點指定顏色,則將再次保留默認的“感覺”。

chart.series[0].data[0].update({
  color: '#f45b5b'
});

例如: http//fiddle.jshell.net/mp27yb75/3/

對於氣泡,填充的不透明度設置為0.5,描邊的不透明度為1,描邊和填充顏色相同。

你可以這樣

chart.series[0].data[0].update({
      y: 150,
      marker: {
        fillColor: 'red',
        states: {
          hover: {
            fillColor: 'red',
            lineColor: 'red'
          }
        }
      }
    });

演示

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM