gpt4 book ai didi

javascript - Chart.js - 每个数据集值 = 不同的轴

转载 作者:行者123 更新时间:2023-12-03 01:16:28 25 4
gpt4 key购买 nike

使用Chart.js ,我想将数据集中的单个值缩放到不同的轴(不是整个数据集)

如屏幕截图所示,这 4 个项目具有不同的单位(公斤、米)。最后一个项目栏 hehehe [KG] 的长度错误(应为 3kg)。

我知道可以为不同的数据集分配不同的轴,但这不是我需要的。

是否可以将不同的轴应用于特定的数据集值?

我的图表的屏幕截图 enter image description here

最佳答案

无法将不同的轴应用于数据集中的特定值。

据我了解,你想要

hehehe [KG] to scale with [kg] axis

您可以优雅地解决此问题,方法是根据单位分隔数据集,然后将每个数据集映射到其所需的轴。

<小时/>

代码片段

Chart.defaults.global.elements.line.fill = false;

var barChartData = {
labels: ['2016', '2017', '2018', '2019'],
datasets: [{
type: 'bar',
label: 'a',
id: "y-axis-0",
data: [1000, 2000, 4000, 5000],
backgroundColor: "rgba(217,83,79,0.75)"
}, {
type: 'bar',
label: 'b',
id: "y-axis-0",
data: [500, 600, 700, 800],
backgroundColor: "rgba(92,184,92,0.75)"
}, {
type: 'line',
label: 'c',
id: "y-axis-0",
data: [1500, 2600, 4700, 5800],
backgroundColor: "rgba(51,51,51,0.5)"
}, {
type: 'line',
label: 'd',
id: "y-axis-1",
data: [5000, 3000, 1000, 0],
backgroundColor: "rgba(151,187,205,0.5)"
}]
};

var element = document.getElementById("myChart");

// allocate and initialize a chart
var chart = new Chart(element, {
type: 'bar',
data: barChartData,
options: {
title: {
display: true,
text: "Chart.js Bar Chart - Stacked"
},
tooltips: {
mode: 'label'
},
responsive: true,
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true,
position: "left",
id: "y-axis-0",
}, {
stacked: false,
position: "right",
id: "y-axis-1",
}]
}
}
});
.myChartDiv {
max-width: 600px;
max-height: 400px;
}
<!DOCTYPE html>
<html>

<head>
<link href="style.css" rel="stylesheet">
<script src="https://npmcdn.com/chart.js@2.7.2/dist/Chart.bundle.min.js">
</script>
</link>
</head>

<body>
<div class="myChartDiv">
<canvas height="400" id="myChart" width="600">
</canvas>
</div>
</body>
<script src="script.js">
</script>

</html>

希望对你有帮助!

关于javascript - Chart.js - 每个数据集值 = 不同的轴,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51994083/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com