ハイチャートの積み重ね縦棒グラフを使用する要件には、100%の内訳ではなく特定のパーセンテージ数の内訳が表示されます。たとえば、数値が60%の場合、グラフには100%までを塗りつぶすのではなく、60%(青20%、緑10%、黄30%)の内訳が表示されます。パーセントチャートの私の理解は、彼らは常に100%ですが、この種の操作がハイチャートで何とか可能かどうか疑問に思っていますか?ありがとう。ハイチャートの積上げ縦棒グラフを100%未満にすることができます
0
A
答えて
0
Like What @Alden Beと言っていますが、%ラベルの積み重ねた列を使用してください。 ここにはJSFiddle exampleです。
$(function() {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Percentage'
},
labels: {
formatter: function() {
return this.value + '%';
}
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
},
formatter: function() {
return this.total + '%';
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}%<br/>Total: {point.stackTotal}%'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
format:'{y}%',
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
});
+0
これは完璧です、ありがとうVivien! – maximus
0
スタックされた割合の列の代わりに積み上げられた列を使用して、単純にラベルにパーセントを追加します。 Percentageカラムは、提供されるすべてのデータポイントのパーセンテージを自動的に決定します。
+0
ありがとう、良い提案、私は以前これを検討していた。 JSONファイルから数値が来て、数値になる必要があるので、各ラベルにパーセンテージを追加する方法はありますか? – maximus
関連する問題
- 1. ハイチャート積み上げ縦棒グラフの変更legendItemClick関数
- 2. ASP.NET 4.0の積み上げ縦棒グラフ
- 3. 積み上げ棒グラフ
- 4. ミラーリングされた積み上げ縦棒グラフ - Javascript/C#?
- 5. ggplot2と積み上げ棒グラフ
- 6. D3の動的積み上げ棒グラフ
- 7. jQuery積み上げ縦棒グラフ(負の値と正の値の両方)
- 8. 同じ3D軸上に複数の積み上げ縦棒グラフをサポートするチャートライブラリがありますか?
- 9. 積み上げ縦棒グラフの水平軸と垂直軸の順序を変更しますか?
- 10. Extjs 4:時間積み上げ棒グラフ、可能ですか?
- 11. 積み上げ棒グラフ+折れ線グラフ角度ライブラリ
- 12. Highcharts:選択状態に積み上げ縦棒増加borderWidth上記フィドルで
- 13. CODE BEHINDを使用した積み上げ棒グラフの作成
- 14. dplyr/ggplot2:na値を含む積み上げ棒グラフのプロット
- 15. ハイチャートでは縦棒グラフが表示されない
- 16. nvd3離散値を持つ積み上げ棒グラフ
- 17. 連続積み上げ棒グラフの作成方法
- 18. ハイチャート:縦棒グラフに特殊マーカーを表示
- 19. 積み上げ棒グラフの値の合計を表示する方法
- 20. ggplot2の集計データから積み上げ棒グラフを作成する方法
- 21. ハイチャート - 滝へのドリルダウンを伴う縦棒グラフ
- 22. フレックス:日付がx軸、名前がy軸の積み上げ棒グラフ
- 23. 奇数ggplot積み上げ棒出力
- 24. 積上げ棒および散布アライメント
- 25. pythonでmatplotlibを使用して積み上げ棒グラフに複数の列を積み重ねる3
- 26. ハイチャート - 棒グラフを円グラフに追加
- 27. JFreeChartを使用してJavaで積み上げ棒グラフを生成
- 28. 浮動縦棒グラフ
- 29. jQuery Zoomable縦棒グラフ
- 30. ggplot 2の色を、積み上げ棒グラフにscale_fill_manualとscale_fill_discreteで表示します。
http://www.highcharts.com/docs/chart-and-series-types/pie-chart does not possible possible。たぶんあなたは、パイの残りの部分が消えてしまうようにtwitterでcssできます。 – Bolza
ありがとうございました。私は実際には、円グラフではなく、スタックされた百分率の縦棒グラフ(http://www.highcharts.com/demo/column-stacked-percent)を参照しています。私はそれが機能するためには、パーセンテージの総数を何らかの方法で編集できる必要があります。私はCSSがここで残念なことに助けになるとは思わない。 – maximus