100%積み上げ棒グラフのデータを変更

This commit is contained in:
Kazuhiro MUSASHI 2020-06-18 21:33:28 +07:00 committed by Gitea
parent dd74249a15
commit 21b6101eb9
1 changed files with 42 additions and 22 deletions

View File

@ -359,37 +359,57 @@ chart=true
{{< /chart >}} {{< /chart >}}
#### 内訳を重視する積み上げ棒グラフ #### 内訳を重視する積み上げ棒グラフ
内訳を重視した場合は、総量に対する割合を積み上げて、以下のようなグラフを利用することになりそう: 内訳を重視した場合は、総量に対する割合を積み上げて、合計が100%になるようにした、以下のようなグラフを利用することになりそう:
{{<chart canvas="stacked-ratio-bar-chart" height="200">}} {{<chart canvas="stacked-ratio-bar-chart" height="200">}}
var mychart = new Chart(document.getElementById("stacked-ratio-bar-chart"), { var ctx = document.getElementById("stacked-bar-chart");
type: "bar", var myBarChart = new Chart(ctx, {
type: 'bar',
data: { data: {
labels: ["2020/01", "2020/02"], labels: ['8月1日', '8月2日', '8月3日', '8月4日', '8月5日', '8月6日', '8月7日'],
datasets: [{ datasets: [
label: "bad", {
data: [5, 25] label: 'A店 来客数',
data: [62, 65, 93, 85, 51, 66, 47]
},{
label: 'B店 来客数',
data: [55, 45, 73, 75, 41, 45, 58]
},{
label: 'C店 来客数',
data: [33, 45, 62, 55, 31, 45, 38]
}]
}, },
{
label: "better",
data: [15, 10]
},
{
label: "good",
data: [10, 8]
}
]},
options: { options: {
title: {
display: true,
text: '支店別 来客数'
},
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true,
ticks: {
suggestedMax: 250,
suggestedMin: 0,
stepSize: 10,
callback: function(value, index, values){
return value + '人'
}
}
}]
},
plugins: { plugins: {
stacked100: {
enable: true
},
colorschemes: { colorschemes: {
scheme: 'tableau.Tableau20', scheme: 'tableau.Tableau20',
fillAlpha: 0.3 fillAlpha: 0.3
} },
stacked100: {
enable: true
},
} }
} },
}); });
{{< /chart >}} {{< /chart >}}