如何在Highcharts中制作虚线条形图边框

Question

我有一个带有两个数据属性的堆积条形图。我想让第二个条看起来变成灰色，带有虚线边框。我试过＆＃34; dashStyle：＆＃39; longdash＆＃39;但是那个以及我尝试的其他任何东西都没有用。

这就是我要寻找的目标：

Answer 1

一般情况下它不受支持，但简单的黑客攻击可以启用：http://jsfiddle.net/ztRF5/132/（注意：必需来自github的最新版本）。

// mapping between SVG attributes and the corresponding options
Highcharts.seriesTypes.bar.prototype.pointAttrToOptions.dashstyle = 'dashStyle';

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'bar'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    plotOptions: {
        bar: {
            stacking: 'percent'   
        }
    },
    series: [{
        data: [29.9],
        borderColor: 'black',
        borderWidth: 2,
        dashStyle: 'dash'
    }, {
        data: [13] 
    }]
});

Answer 2

请注意，在最新版本的HighCharts中，不再定义Highcharts.seriesTypes.bar.prototype.pointAttrToOptions，因此代码将出错。您可以简单地注释掉第一行（Highcharts.seriesTypes.bar.prototype.pointAttrToOptions.dashstyle =＆＃39; dashStyle＆＃39 ;;），它会起作用。 （http://jsfiddle.net/willieliao/6c48x39v/）

var chart = new Highcharts.Chart({

  chart: {
    renderTo: 'container',
    type: 'bar'
  },

  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  plotOptions: {
    bar: {
      stacking: 'percent'
    }
  },

  series: [{
    data: [29.9],
    borderColor: 'black',
    borderWidth: 2,
    dashStyle: 'dash'
  }, {
    data: [13]
  }]

});