javascript - Chart JS:可以在 Chart JS 中混合散点图和条形图吗?
问题描述
我在 matplotlib python 中有这个图,这是一个直方图和一些具体的函数。我正在使用条形/折线混合图表尝试与 ChartJS 相同的情节。问题是两个图的 x 轴点必须相同,并且没有实现函数的形式。这个情节在 Chart JS 中是否可行。如果没有,我可以使用哪些库?
解决方案
是的,这可以通过使用具有相同标签但偏移量和显示设置为 false 的第二个 x 轴来实现:
const labels = ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"];
const options = {
type: 'bar',
data: {
labels,
datasets: [{
type: 'line',
xAxisID: 'x2',
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange',
backgroundColor: 'orange'
},
{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink',
backgroundColor: 'pink'
}
]
},
options: {
scales: {
x: {},
x2: {
labels,
offset: false,
display: false
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>
推荐阅读
- lua - 如何记录/跟踪拼写下降的坐标
- r - 在 R 中为类似 Time 的行分配一个数值组值
- python - 如何在 django 中格式化从 1000 到 1k 的数字
- r - 重命名数据框列表中的所有列
- python - Windows 10 - Anaconda 2020.02 - GTK 安装失败,gdk-pixbuf
- php - Laravel:将默认值发送到 web.php 中的路径
- android - firebaseAuth.getCurrentUser 在第一次调用时返回 null
- python - TypeError: 'DataFrame' object is not callable 错误信息
- python - 降低科学计数法中长小数的准确性
- java - Java - 将十六进制字符串解析为 ASN.1 格式