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

增加对完成字幕和添加的自定义标签页脚开始行动和酒吧之间消除空间图表

这是接近你的要求添加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>