如何用HighCharts实现无分类自定义颜色单系列水平柱状图？

需求实现说明 #

所有需求都可实现，具体配置方案如下：

• 隐藏分类轴
  水平柱状图（bar类型）的分类轴为Y轴，通过设置yAxis.labels.enabled = false隐藏分类标签，同时可关闭轴标题、轴线进一步隐藏分类相关元素：

  yAxis: {
    labels: { enabled: false },
    title: { enabled: false },
    lineWidth: 0,
    tickWidth: 0
  }
  

• 单个系列3个数据+自定义颜色
  在系列的data数组中为每个数据点单独指定color属性；若要支持主题切换，可将颜色定义在HighCharts主题中，切换主题时自动同步颜色：

  // 定义浅色主题
  Highcharts.theme = { colors: ['#7CB5EC', '#90EE90', '#F7A35C'] };
  Highcharts.setOptions(Highcharts.theme);
  
  // 系列配置
  series: [{
    data: [
      { y: 10, color: Highcharts.theme.colors[0] },
      { y: 20, color: Highcharts.theme.colors[1] },
      { y: 15, color: Highcharts.theme.colors[2] }
    ]
  }]
  

• 颜色随主题切换
  定义不同主题的colors数组，通过事件触发Highcharts.setOptions切换主题，再调用chart.update()更新图表即可：

  function switchToDarkTheme() {
    Highcharts.theme = { colors: ['#2B908F', '#90EE90', '#F45B5B'] };
    Highcharts.setOptions(Highcharts.theme);
    chart.update({
      series: [{
        data: [
          { y: 10, color: Highcharts.theme.colors[0] },
          { y: 20, color: Highcharts.theme.colors[1] },
          { y: 15, color: Highcharts.theme.colors[2] }
        ]
      }]
    });
  }
  

解决图表高度超出问题 #

通过以下配置精准控制图表高度：

• 设置chart.height为固定值（如200），避免自适应高度超出预期
• 调整plotOptions.bar的groupPadding和pointPadding减少柱子间空白
• 调整chart.spacing压缩图表边缘空白

chart: {
  type: 'bar',
  height: 200,
  spacing: [5, 10, 5, 10] // 上、右、下、左间距
},
plotOptions: {
  bar: {
    groupPadding: 0.1,
    pointPadding: 0.1
  }
}

完整可运行示例代码 #

<!DOCTYPE html>
<html>
<head>
  <title>HighCharts Horizontal Bar</title>
  <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
  <div id="container" style="width: 400px;"></div>
  <button onclick="switchToDarkTheme()">切换深色主题</button>

  <script>
    // 初始化浅色主题
    Highcharts.theme = {
      colors: ['#7CB5EC', '#90EE90', '#F7A35C']
    };
    Highcharts.setOptions(Highcharts.theme);

    let chart = Highcharts.chart('container', {
      chart: {
        type: 'bar',
        height: 200,
        spacing: [5, 10, 5, 10]
      },
      title: { text: '' },
      xAxis: { title: { enabled: false } },
      yAxis: {
        labels: { enabled: false },
        title: { enabled: false },
        lineWidth: 0,
        tickWidth: 0
      },
      legend: { enabled: false },
      plotOptions: {
        bar: {
          groupPadding: 0.1,
          pointPadding: 0.1
        }
      },
      series: [{
        data: [
          { y: 10, color: Highcharts.theme.colors[0] },
          { y: 20, color: Highcharts.theme.colors[1] },
          { y: 15, color: Highcharts.theme.colors[2] }
        ]
      }]
    });

    // 切换主题函数
    function switchToDarkTheme() {
      Highcharts.theme = {
        colors: ['#2B908F', '#90EE90', '#F45B5B']
      };
      Highcharts.setOptions(Highcharts.theme);
      chart.update({
        series: [{
          data: [
            { y: 10, color: Highcharts.theme.colors[0] },
            { y: 20, color: Highcharts.theme.colors[1] },
            { y: 15, color: Highcharts.theme.colors[2] }
          ]
        }]
      });
    }
  </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Bee Sharp