如何在highcharts中创建虚线条形图

Question

我必须使用highcharts创建附图中所示的条形图。图像中的图形已使用Excel创建。但是Highcharts似乎没有提供这样的功能。虽然它允许使用模式创建图形，但是对这些模式没有太多控制。任何人都可以确认我们是否可以在高级图表中创建类似的图表？我在http://jsfiddle.net/sandeepkparashar/6c48x39v/3/ Dashed Bar Chart为样本创建了一个高级图表小提琴

Answer 1

正如评论中提到的，pattern-fill plugin可以解决这个问题。 您可以创建模式并映射系列，因此每隔一列将具有相应的模式。

var colors = ["#FF0000", "#FF8C00", "#FFFF00", "#00FF00", "#3366FF"];

var series = [{
  "color": "#FF0000",
  "name": "High",
  "data": [298, 199, 448, 271, 772, 494, 935, 562]
}, {
  "color": "#FF8C00",
  "name": "Medium High",
  "data": [130, 32, 234, 172, 159, 134, 218, 160]
}, {
  "color": "#FFFF00",
  "name": "Medium",
  "data": [141, 163, 95, 63, 71, 22, 26, 13]
}, {
  "color": "#00FF00",
  "name": "Medium Low",
  "data": [42, 8, 34, 19, 16, 20, 21, 26]
}, {
  "color": "#3366FF",
  "name": "Low",
  "data": [4, 4, 0, 0, 0, 0, 0, 0]
}];

function getPatterns(colors) {
  return colors.map(function(color, i) {
    return {
      id: 'custom-pattern-' + i,
      path: {
        d: 'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11',
        stroke: color
      }
   };
 });
}

function getMappedSeries(series) {
  return series.map(function(serie, i) {
    return {
      color: colors[i],
      name: serie.name,
      data: serie.data.map(function(value, j) {
        return j % 2 ? {
          y: value,
          color: 'url(#custom-pattern-' + i + ')'
        } : value;
     })
   };
 });
}

示例：http://jsfiddle.net/6c48x39v/8/

在本地，您可以为系列设置边框短划线样式，但是您需要为特定点设置短划线样式，因此您必须将系列分为短划线/无边框系列或extend Highcharts。