3
私はそう私はhighchartsでこれを解決する方法を教えてくださいこれまでのところ、私はこれを試してみましたHighchartsドキュメント にこのタイプを見つけることができませんしているハイチャートでバーの残りのパーセントを表示する方法は?
画像に次のように灰色のバーの残りのパーセントを表示したいですマニュアルまたはjqueryの
Highcharts.chart('Chart1Progress', {
chart: {
type: 'bar',
backgroundColor: null
},
title: null,
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
visible: false,
shadow: true
},
yAxis: {
min: 0,
title: null,
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
},
},
legend: {
enabled: false,
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'black',
borderColor: '#CCC',
borderWidth: 1,
shadow: true
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'John',
data: [{ y: 5, color: 'red' }, { y: 3, color: '#DDDF0D' }, { y: 4, color: '#55BF3B' }, { y: 7, color: '#5dacdf' }, { y: 2, color: 'pink' }]
}]
});
を積層するパーセントといくつかのデータにスタッキングを設定する必要があります。しかし、あなたはcssを使って線を描くことができます(グラフの下に 'div 'を作成します)。または、javascriptを使用して、ハイチャートが作成したSVGにSVG線を追加することができます。 –
これを行う最も簡単な方法は、既存のシリーズポイントと最大値のデルタとして計算する2番目のシリーズを追加し、そのシリーズの色を目的のグレーに設定することです。 – jlbriggs