javascript - 如何使用 Chart.js 实现连续线图中的不连续部分(跳跃)?
问题描述
我使用 Chart.js 呈现折线图。我不想重新调整 x 轴以获取更多样本点。
如果 y 轴值不连续变化,渲染跳跃的最佳方法是什么?
理想情况下,我可以为每个 x 值定义两个 y 值。因此,假设我传入的数据数组在 idx 1{datasets: [{data : []}]}
处[1, 2, 4, 5]
跳转,那么我想将其定义为[1, [2, 3], 4, 5]
.
解决方案
给你:https ://jsbin.com/kacecejade/1/edit?js,output
我遍历数据数组,当没有数字而是数组时,我将标签数组中的数组元素加倍,所以我有两个数据的两个标签。
var sLabels = ['2018-10-26', '2018-11-02', '2018-11-09', '2018-11-16', '2018-11-23', '2018-11-30', '2018-12-07', '2018-12-14', '2018-12-20', '2018-12-28', '2018-12-31', '2019-01-01', '2019-01-04', '2019-01-11', '2019-01-18']
var sData = [-4.43, [-3.47, -3.34], -3.62, [-4.20, -3.70], -4.04, -3.75, -4.46, -4.50, -4.50, -4.50, -4.05, [-3.76, -3.64], [-3.38, -3.09], -3.24, -2.88]
function formatData() {
var newLabels = []
var newData = []
for (var i = 0; i < sLabels.length; i++) {
if (Array.isArray(sData[i])) {
for (var j = 0; j < sData[i].length; j++) {
newLabels.push(sLabels[i])
newData.push(sData[i][j])
}
} else {
newLabels.push(sLabels[i])
newData.push(sData[i])
}
}
return [newLabels, newData]
}
var [labels, datasetData] = formatData()
var data = {
labels: labels,
datasets: [{
data: datasetData,
lineTension: 0
}]
}
推荐阅读
- javascript - Bootstrap上的嵌套下拉切换不起作用
- redis - 主机重启后 Redis 故障转移失败
- python - Django 计算字段不会出现在迁移中
- linux - 根据扩展标准移动文件的脚本
- c++ - C++ .find() 函数在目录中搜索文件名
- python - 为什么我的精确召回和 ROC 曲线不平滑?
- macos - 从 MacOS 上的日志文件中获取常用命令计数
- javascript - Angular中的重复功能失败
- apache-zeppelin - zeppelin 0.8 中的 json 导入错误
- android - Firebase 读取 getter 设置器