如何在柱形图中设置边框-Highchart [英] How to set border in column chart - Highchart

问题描述

任何人都可以帮助您设置柱形图中的边框吗?单击每个条形以设置不同的边框和颜色. 请使用以下参考代码:

Can anyone help how to set border in column chart, On click each bar to set a different border and color. Please use this Reference Code:

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

推荐答案

更新我以前的帖子.

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

Here I am using Highcharts default colors by index e.point.index value to set borders color of column and border width is also set by index e.point.index value by click on each column. You can also use custom array of border width and color and access this by 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>

这篇关于如何在柱形图中设置边框-Highchart的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！