如何在列高图中添加不同的颜色边框 [英] How to add different color border in column highchart

问题描述

切换方法 - 点击酒吧显示边框并隐藏边框。但背景不应该改变。请参阅我的代码，我们是否有任何切换类型的方法？。

解决方案

发布

更新如下

  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（{$ b $'stroke'：，
'stroke-宽度'：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 '，'葡萄'，'香蕉']}，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 = containerstyle =min-width：310px; height：400px; margin：0 auto>< / div>




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?.

解决方案

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>

这篇关于如何在列高图中添加不同的颜色边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！