Question

任何人都可以帮助如何在柱形图中设置边框，单击每个条以设置不同的边框和颜色。请使用此参考代码：

    plotOptions: {
        series: {
            allowPointSelect: true,
            states: {
                select: {
                    color: null,
                    borderWidth:5,
                    borderColor:'Blue'
                }
            }
        }
    },

    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]        
    }]
});

Answer 1

更新我以前的Post。

这里我使用Highcharts默认颜色按索引e.point.index值来设置列的边框颜色，边框宽度也通过索引e.point.index值设置，点击每一列。您还可以使用边框宽度和颜色的自定义数组，并通过e.point.index访问它。

 plotOptions: {
    series: {
      events: {
        click: function(e) {
          var chart = e.point.series.chart;
          e.point.select(true, true);
          chart.series[0].data[e.point.index].graphic.attr({
            'stroke': colors[e.point.index],
            'stroke-width': width[e.point.index],
            'fill':Highcharts.defaultOptions.colors[e.point.index],
          });
        }
      },
    }
  },

var colors= ['#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE', 
   '#DB843D', '#92A8CD', '#A47D7C', '#B5CA92'];
var width=[2,5,6,8,9,3,4] ;  

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Stacked bar chart'
  },
  xAxis: {
    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Total fruit consumption'
    }
  },
  legend: {
    reversed: true
  },
  plotOptions: {
    series: {
      events: {
        click: function(e) {
          var chart = e.point.series.chart;
          e.point.select(true, true);
          chart.series[0].data[e.point.index].graphic.attr({
            'stroke': colors[e.point.index],
            'stroke-width': width[e.point.index],
            'fill':Highcharts.defaultOptions.colors[e.point.index],
          });
        }
      },
      /*allowPointSelect: true,
      states: {
        select: {
          borderWidth: 4,
          borderColor: '#e4b0b2'
        }
      }*/
    }
  },
  series: [{
    name: 'John',
    data: [3, 4, 4, 2, 5],
    showInLegend: false,
    name: 'Twitter Trending',
    colorByPoint: true,
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

Answer 2

您可以使用plotOptions.series.point.events.click回调函数更新任何点的属性（颜色，边框等）。

  plotOptions: {
    series: {
        point: {
        events: {
            click: function() {
            this.update({
                color: Highcharts.defaultOptions.colors[Math.round(Math.random() * 10)]
            });
          }
        }
      }
    }
  }

现场演示： http://jsfiddle.net/kkulig/dtdw81L7/

如何在柱形图中设置边框 - Highchart

2 个答案: