英文:
How to create Stacked Line Chart in chartjs Multiple Y Axis and common X Axis
问题
Here is the translated content you requested:
如何在Chart.js中创建像图像中的堆叠图表？
但我希望y2轴的高度比其他y轴要高2倍。
我能够创建多个y轴，但无法设置任何我想要的刻度的高度。
let scales = {
x: {
type: "linear",
position: "left",
max: res.maxs[0],
},
y: {
type: "linear",
position: "left",
stack: "demo",
stackWeight: 2,
grid: {
borderColor: colors.blue,
},
max: res.maxs[4],
min: 0,
title: {
display: true,
text: titlesLabelY[3],
font: {
size: 11,
},
},
},
y2: {
type: "linear",
position: "left",
stack: "demo",
stackWeight: 2,
grid: {
borderColor: colors.blue,
},
max: res.maxs[3],
min: 0,
title: {
display: true,
text: titlesLabelY[2],
font: {
size: 11,
},
},
ticks: {
callback: (value, index, values) => (index == (0)) ? undefined : value.toFixed(1),
},
},
};
提前感谢。
英文:
How can I create stacked chart in chartjs like in image?
But I want y2 axis to have 2x more height than other y scales.
I was able to create multiple y axis but cant set the height of any scale I want.
let scales = {
x: {
type: "linear",
position: "left",
max: res.maxs[0],
},
y: {
type: "linear",
position: "left",
stack: "demo",
stackWeight: 2,
grid: {
borderColor: colors.blue,
},
max: res.maxs[4],
min: 0,
title: {
display: true,
text: titlesLabelY[3],
font: {
size: 11,
},
},
},
y2: {
type: "linear",
position: "left",
stack: "demo",
stackWeight: 2,
grid: {
borderColor: colors.blue,
},
max: res.maxs[3],
min: 0,
title: {
display: true,
text: titlesLabelY[2],
font: {
size: 11,
},
},
ticks: {
callback: (value, index, values) => (index == (0)) ? undefined : value.toFixed(1),
},
},
};
Thanks in advance
答案1
得分: 1
以下是翻译好的内容：
这就是 stackWeight 的作用（请参阅文档）。同一堆栈中每个轴的长度与其 stackWeight 成比例。
因此，如果轴 y2 应该比 y 和 y3 长两倍（这两者相等），您应该为 y2 设置 stackWeight: 2，而为其他两个轴设置 stackWeight: 1。
这是一个简单的示例：
英文:
That's the role of stackWeight (see the docs). The length of each axis in the same stack is proportional to its stackWeight.
So, if axis y2 should have twice the length of y and y3 (those two being equal) you should set stackWeight: 2 for y2 and stackWeight: 1 for the other two.
Here's a minimal example:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const x = Array.from({length: 101}, (_, i)=>({x: i/100}));
const data = {
datasets: [
{
data: x.map(({x})=>({x, y: Math.exp(x+1)})),
borderColor: 'red',
},
{
data: x.map(({x})=>({x, y: Math.exp(-x+1)})),
borderColor: 'blue',
yAxisID: 'y2',
},
{
data: x.map(({x})=>({x, y: Math.sin(x+1)})),
borderColor: 'green',
yAxisID: 'y3',
}
]
};
const config = {
type: 'line',
data: data,
options: {
responsive: true,
plugins: {
legend: {
display: false,
},
},
scales: {
x: {
type: 'linear',
},
y: {
stack: 'demo',
offset: true,
stackWeight: 1,
},
y2: {
stack: 'demo',
stackWeight: 2,
offset: true,
border: {
color: 'black',
width: 2
}
},
y3: {
stack: 'demo',
offset: true,
stackWeight: 1
}
}
},
};
new Chart(document.querySelector('#chart1'), config);
<!-- language: lang-html -->
<canvas id="chart1" style="height:600px"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.3.0/chart.umd.js" integrity="sha512-CMF3tQtjOoOJoOKlsS7/2loJlkyctwzSoDK/S40iAB+MqWSaf50uObGQSk5Ny/gfRhRCjNLvoxuCvdnERU4WGg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论