使 Highcharts 看起来像具有多个系列的进度条

Question

我一直在尝试修改 highcharts 条形图的外观，并设法使水平条形图看起来像进度条形图。为了做到这一点，我在 SO 中关注了这个answer。现在，我有两个问题。如果我有一个数据系列，该图表看起来不错，但如果我有多个系列（最多可以有 3 个系列），这就是它的外观。

因此，我想增加标签之间的边距（美国、日本等）。其次，我想将数据标签（10、40、20 等）对齐到图表右侧，在条形之外。我想我需要编写一些 javascript，但我不确定从哪里开始或修改什么。任何帮助表示赞赏。 谢谢。

var chart = new Highcharts.Chart({
chart: {
  renderTo: 'container',
  type: 'bar',
  backgroundColor: '#003755',
  marginBottom: 60,
  marginLeft: 80,
  marginTop: 40,
  marginRight: 140
  },
  colors: ['#0AA3DB', '#3AC6B1', '#000612'],
  xAxis: [{
    categories: ['USA', 'Japan', 'Canada', 'Brasil', 'China', 'Russia', 'UK', 'France', 'NA'],
    labels: {
      align: 'left',
      x: 0,
      y: -13,/* to be adjusted according to number of bars*/
      style: {
        fontSize: "0.875rem",
        color: '#fff'
      }
    },
    lineColor: 'transparent',
    tickLength: 0
  }],
  yAxis: {
    lineWidth: 0,
    gridLineWidth: 0,
    labels: {
      enabled: false
    }
  },
  plotOptions: {
    bar: {
      dataLabels: {
        allowOverlap: true,
        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
      }
    },
    series: {
      pointWidth: 8, //width of the column bars irrespective of the chart size
      borderRadius: 5,
      borderColor: 'transparent',
      pointPadding: 0,
      groupPadding: 0,
      dataLabels: {
        enabled: true,
        format: '<b>{point.y:,.0f}</b>',
        shared: true,
        useHTML: true,
        align: 'right'
      }
    }
  },
  exporting: {
    enabled: false
  },

  credits: {
    enabled: false
  },
  tooltip: {
    yDecimals: 2
  },
  tooltip: {
    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
    pointFormat: '<b>{point.name} - {point.y:,.0f}%</b>',
    shared: true,
    useHTML: true
  },
  series: [{
    name: 'Current',
    type: 'bar',
    data: [{
      name: 'USA',
      y: 10
    }, {
      name: 'Japan',
      y: 40
    }, {
      name: 'Canada',
      y: 20
    }, {
      name: 'Brasil',
      y: 5
    }, {
      name: 'China',
      y: 9
    }, {
      name: 'Russia',
      y: 8
    }, {
      name: 'UK',
      y: 7
    }, {
      name: 'France',
      y: 1
    }, {
      name: 'NA',
      y: 0
    }]
  }, {
    name: '2005',
    type: 'bar',
    data: [{
      name: 'USA',
      y: 10
    }, {
      name: 'Japan',
      y: 40
    }, {
      name: 'Canada',
      y: 20
    }, {
      name: 'Brasil',
      y: 5
    }, {
      name: 'China',
      y: 9
    }, {
      name: 'Russia',
      y: 8
    }, {
      name: 'UK',
      y: 7
    }, {
      name: 'France',
      y: 1
    }, {
      name: 'NA',
      y: 0
    }]
  }, {
    name: '2023',
    type: 'bar',
    data: [{
      name: 'USA',
      y: 10
    }, {
      name: 'Japan',
      y: 40
    }, {
      name: 'Canada',
      y: 20
    }, {
      name: 'Brasil',
      y: 5
    }, {
      name: 'China',
      y: 9
    }, {
      name: 'Russia',
      y: 8
    }, {
      name: 'UK',
      y: 7
    }, {
      name: 'France',
      y: 1
    }, {
      name: 'NA',
      y: 0
    }]
  }]
});

https://jsfiddle.net/fbsveysb/

Answer 1

使用groupPadding增加列组之间的空间。

dataLabels.align 的默认值为left（标签左侧的点）- 该值应用于将数据标签定位在条形之外。

---

现场工作演示： https://jsfiddle.net/kkulig/w782cud7/

API 参考：

• https://api.highcharts.com/highcharts/series.bar.dataLabels.align
• https://api.highcharts.com/highcharts/series.bar.groupPadding

Answer 2

这可能是我在评论中提出的一种可能的解决方案。它使用Scrollbars for any axis，它显示了如何在轴上滚动。它使用 highstock.js 文件，它可以应用于常规的 Highcharts 轴。

var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'container',
    type: 'bar',
    backgroundColor: '#003755',
    marginBottom: 60,
    marginLeft: 80,
    marginTop: 40,
    marginRight: 140,
    events: {
      load: function() {
        var maxVal = 0;
        for (var i = 0; i < this.series.length; i++) {
          if (Math.max.apply(Math, this.series[i].yData) > maxVal) {
            maxVal = Math.max.apply(Math, this.series[i].yData)
          }
        }
        this.yAxis[0].setExtremes(0, maxVal + 10)
      }
    }
  },
  colors: ['#0AA3DB', '#3AC6B1', '#000612'],
  xAxis: [{
    categories: ['USA', 'Japan', 'Canada', 'Brasil', 'China', 'Russia', 'UK', 'France', 'NA'],
    labels: {
      align: 'left',
      x: 0,
      y: -20,
      /* to be adjusted according to number of bars*/
      style: {
        fontSize: "0.875rem",
        color: '#fff'
      }
    },
    lineColor: 'transparent',
    tickLength: 0,
    min: 0,
    max: 4,
    scrollbar: {
      enabled: true
    },
  }],
  yAxis: {
    lineWidth: 0,
    gridLineWidth: 0,
    labels: {
      enabled: false
    }
  },
  plotOptions: {
    bar: {
      grouping: true,
      pointPadding: 0,
      dataLabels: {
        allowOverlap: true,
        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
      }
    },
    series: {
      pointWidth: 8, //width of the column bars irrespective of the chart size
      borderRadius: 5,
      borderColor: 'transparent',
      dataLabels: {
        enabled: true,
        //format: '{point.y:.1f}',
        format: '<b>{point.y:,.0f}</b>',
        shared: true,
        useHTML: true,
        overflow: 'none'
      }
    }
  },
  exporting: {
    enabled: false
  },

  credits: {
    enabled: false
  },
  tooltip: {
    yDecimals: 2
  },
  tooltip: {
    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
    pointFormat: '<b>{point.name} - {point.y:,.0f}%</b>',
    shared: true,
    useHTML: true
  },
  series: [{
    name: 'Current',
    type: 'bar',
    data: [{
      name: 'USA',
      y: 10
    }, {
      name: 'Japan',
      y: 40
    }, {
      name: 'Canada',
      y: 20
    }, {
      name: 'Brasil',
      y: 5
    }, {
      name: 'China',
      y: 9
    }, {
      name: 'Russia',
      y: 8
    }, {
      name: 'UK',
      y: 7
    }, {
      name: 'France',
      y: 1
    }, {
      name: 'NA',
      y: 0
    }]
  }, {
    name: '2005',
    type: 'bar',
    data: [{
      name: 'USA',
      y: 10
    }, {
      name: 'Japan',
      y: 40
    }, {
      name: 'Canada',
      y: 20
    }, {
      name: 'Brasil',
      y: 5
    }, {
      name: 'China',
      y: 9
    }, {
      name: 'Russia',
      y: 8
    }, {
      name: 'UK',
      y: 7
    }, {
      name: 'France',
      y: 1
    }, {
      name: 'NA',
      y: 0
    }]
  }, {
    name: '2023',
    type: 'bar',
    data: [{
      name: 'USA',
      y: 10
    }, {
      name: 'Japan',
      y: 40
    }, {
      name: 'Canada',
      y: 20
    }, {
      name: 'Brasil',
      y: 5
    }, {
      name: 'China',
      y: 9
    }, {
      name: 'Russia',
      y: 8
    }, {
      name: 'UK',
      y: 7
    }, {
      name: 'France',
      y: 1
    }, {
      name: 'NA',
      y: 0
    }]
  }]
});

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<div id="container"></div>