Highcharts進度柱狀圖

Question

是否有可能創建一個Highcharts進度表是這樣的：

https://0.s3.envato.com/files/84221450/screenshots/weblator_responsive_charts_7_bootstrap.jpg

相信條形圖可以定製創建此。但是是否可以改變樣式，以便不顯示任何軸，並且條形標籤位於條形上方而不是在它們之前？

Answer 1

可以重建，但也不是那麼動態的（風格）。所以你必須根據圖表中的數據系列來調整css。

var chart = new Highcharts.Chart({ 
 
    chart: { 
 
    renderTo: 'container', 
 
    type: 'bar', 
 

 
    marginBottom: 120 
 
    }, 
 
    legend: { 
 
    enabled: false 
 
    }, 
 
    colors: ['#173c64'], 
 
    xAxis: { 
 
    categories: ['option 1', 'option 2', 'option 3', 'option 4 ', 'option 5 '], 
 
    labels: { 
 
     align: 'left', 
 
     x: 5, 
 
     y: -20, /* to be adjusted according to number of bars*/ 
 
     style: { 
 
     fontSize: "1rem", 
 
     color: '#000' 
 
     } 
 
    }, 
 
    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, 
 
     dataLabels: { 
 
     enabled: true, 
 
     color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white' 
 
     } 
 
    } 
 
    }, 
 
    title: { 
 
    margin: 0, 
 
    useHTML: true, 
 
    text: "Test", 
 
    style: { 
 
     "color": "#333333", 
 
     "fontSize": "1.5rem", 
 
     "fontWeight": "bold" 
 
    } 
 
    }, 
 

 
    series: [{ 
 
    data: [{ 
 
     y: 100, 
 
     color: '#99ddff' 
 
    }, { 
 
     y: 10, 
 
     color: '#ff8c1a' 
 
    }, { 
 
     y: 20, 
 
     color: '#ff471a' 
 
    }, { 
 
     y: 60, 
 
     color: '#c299ff' 
 
    }, { 
 
     y: 10, 
 
     color: '#99ddff' 
 
    }] 
 
    }] 
 
})

<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>