は、このようなHighchartsで進捗グラフを作成することが可能です：Highchartsプログレスバーチャート
https://0.s3.envato.com/files/84221450/screenshots/weblator_responsive_charts_7_bootstrap.jpg
私は棒グラフがこれを作成するためにカスタマイズすることができると信じています。しかし、軸が表示されず、棒のラベルが棒の上に置かれるのではなく棒の上に置かれるようにスタイリングを変更することは可能ですか？
再作成は可能ですが、ダイナミックではありません（スタイルで）。したがって、チャートのデータシリーズに従って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>
プログレスバーは受け入れられません。もっと何をすべきかをコメントしてください。これらのパターンをチャートの棒の中に入れたい場合、これは現在のスコープを超えています –