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

1 回答

• 0

  正如评论中提到的，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 .

  回复于 2024-04-29T09:28:38+08:00