How to add different color border in column highchart

问题

Toggle method - on Click of bars show border and hide border. But Background should not change. Please refer my code, Do we have any toggle kind of method?.

回答1:

Your code is not reproducible using previous code from this post

Updated It as follows

  plotOptions: {
    series: {
      events: {
        click: function(e) {
          var chart = e.point.series.chart;
          e.point.select(true, false); //at any time only one column is selected
          /*logic for toggle*/
          if (currSel !== e.point.index) {
            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],
            });
            currSel = e.point.index;
          } else {
            chart.series[0].data[e.point.index].graphic.attr({
              'stroke': "",
              'stroke-width': 0,
              'fill': Highcharts.defaultOptions.colors[e.point.index],
            });
            currSel = "";
          }
        }
      },
    }
  },

var colors = ['#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE',
  '#DB843D', '#92A8CD', '#A47D7C', '#B5CA92'
];
var width = [2, 5, 6, 8, 9, 3, 4];
var currSel;
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, false);
          if (currSel !== e.point.index) {
            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],
            });
            currSel = e.point.index;
          } else {
            chart.series[0].data[e.point.index].graphic.attr({
              'stroke': "",
              'stroke-width': 0,
              'fill': Highcharts.defaultOptions.colors[e.point.index],
            });
            currSel = "";
          }
        }
      },
    }
  },
  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; height: 400px; margin: 0 auto"></div>

来源：https://stackoverflow.com/questions/47827754/how-to-add-different-color-border-in-column-highchart

标签

jquery

Highcharts