Highcharts 水平条形图，条内带有文本

Question

我对 Highcharts 完全陌生，需要设计一个与下图完全一样的水平条形图。

我试过摆弄并设法在条形图内显示 4 和 2。但是，我无法在第一个栏上方显示“已完成”文本，在第二个栏下方显示“执行操作”文本。我也想消除酒吧之间的差距。以下是我目前的代码。

var chart = new Highcharts.Chart({
chart: {
    renderTo:'container',
    //marginLeft:120,
    type:'bar'
},
legend: { enabled: false},
colors:['#173c64'],
xAxis: {
    categories: ['4','2'],
    labels: {
        align:'left',
        x:5,
        style: {
            fontSize: '4em',
            color:'#fff'
        }
    },
    lineWidth: 0,
    gridLineWidth: 0,
    lineColor: 'transparent',
    minorTickLength: 0,
    tickLength: 0,
    title: {
           enabled: false
    }

},
yAxis: {
     lineWidth: 0,
     gridLineWidth: 0,
     lineColor: 'transparent',      
     labels: {
         enabled: false
     },
     minorTickLength: 0,
     tickLength: 0,
     title: {
            enabled: false
     }
},
title: {
   margin:0,
   useHTML: true,
   text: "This Month",
   style: {"color": "#333333", "fontSize": "1.5rem","fontWeight": "bold"}
},
series:[{
    data:[{y: 20, color:'#0091dc'},{y: 17, color:'#173c64'}]
}]      

});

Answer 1

为 Completed 添加了副标题，并在 To Action 的页脚中添加了自定义标签，并为删除添加了 plotOptions 的条之间的空间 groupPadding: 0,pointPadding: 0, 在图表中

这接近您的要求。希望这会有所帮助

var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'container',
    //marginLeft:120,
    type: 'bar',
    events: {
      load: function() {
        var label = this.renderer.label("To Action")
          .css({
            width: '100px',
            fontSize: '1.5rem'
          })
          .add();

        label.align(Highcharts.extend(label.getBBox(), {
          align: 'left',
          x: 0, // offset
          verticalAlign: 'bottom',
          y: -30 // offset
        }), null, 'spacingBox');

      }
    },
    marginBottom: 120
  },
  legend: {
    enabled: false
  },
  colors: ['#173c64'],
  xAxis: {
    categories: ['4', '2'],
    labels: {
      align: 'left',
      x: 5,
      style: {
        fontSize: '4em',
        color: '#fff'
      }
    },
    lineWidth: 0,
    gridLineWidth: 0,
    lineColor: 'transparent',
    minorTickLength: 0,
    tickLength: 0,
    title: {
      enabled: false
    }

  },
  yAxis: {
    lineWidth: 0,
    gridLineWidth: 0,
    lineColor: 'transparent',
    labels: {
      enabled: false
    },
    minorTickLength: 0,
    tickLength: 0,
    title: {
      enabled: false
    }
  },
  plotOptions: {
    bar: {
      stacking: "normal",
      groupPadding: 0, //add here
      pointPadding: 0, //add here
    }
  },
  title: {
    margin: 0,
    useHTML: true,
    text: "This Month",
    style: {
      "color": "#333333",
      "fontSize": "1.5rem",
      "fontWeight": "bold"
    }
  },
  subtitle: {
    align: 'left',
    y: 40, //offset
    useHTML: true,
    text: 'Completed',
    style: {
      "color": "#333333",
      "fontSize": "1.5rem"
    }
  },
  series: [{
    data: [{
      y: 20,
      color: '#0091dc'
    }, {
      y: 17,
      color: '#173c64'
    }]
  }]
})

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>