chart.js - 鼠标前景图
问题描述
类型:'scatter' 现在第一个在顶部。是否可以在顶部显示不同的图表? 图片
解决方案
在您的数据集数组中,您可以放置一个类型以在其中放置不同的类型。数组中数据集的顺序决定了它们的绘制顺序。
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 13, 3, 5, 2, 3],
borderWidth: 1
},
{
type: 'bar',
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1,
backgroundColor: 'red'
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
}
}
var 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/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>
推荐阅读
- datatables - 在 DataTables 中居中 PDF 按钮
- vb.net - 如何从 Windows 窗体返回值以发挥作用?
- javascript - 通过 Konva.js 和 Gifler 加载时如何修复 gif 动画的故障?
- javascript - 鼠标移动时的空闲事件 - 如何创建循环?
- apache-spark - 有没有办法使用 Snowflake 及其 Spark 连接器获取查询的行数?
- html - 我有一个带有 HTML 文档的 clob。如何用文本替换其中的所有脚本?
- html - 如何在不改变页面高度的情况下移动元素?
- delphi - 您可以在运行时更改在运行时在 TGridPanel 中创建的控件的跨度吗
- java - 如果我使用 == 为什么不安全的单例实例将是真的
- sql - 是否可以在每个案例中添加多个选择语句?