Chartjs - 两个 Y 轴刻度问题
Chartjs - Two Y-axis scale problems
我在 chartjs V2 生成的条形图和折线图中有多个集合 - https://jsfiddle.net/17mw40rx/
显然,右侧 y 轴未正确缩放或显示正确的标签。
理想情况下,我尝试显示图形,以便左轴的最大值缩放到最高条形的最大值。 我希望右手 y 轴然后缩放到折线图值。
我追求这样的事情:http://plnkr.co/edit/TvY5tz?p=info
有人可以帮忙吗?
法典:
var entranceDataset = {
label: 'IN',
type: 'bar',
yAxesID : "y-axis-1",
data: [3, 11, 10, 6, 9, 28, 45, 40, 26, 3],
backgroundColor: 'rgba(0, 204, 0, 0.2)',
borderColor: 'rgba(0, 204, 0,1)',
borderWidth: 1
};
var dataset = [];
dataset.push(entranceDataset);
var exitDataset = {
label: 'OUT',
type: 'bar',
yAxesID : "y-axis-1",
data: [2, 0, 3, 7, 11, 13, 8, 44, 35, 3, 46, 1],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
};
dataset.push(exitDataset);
var lineDataset = {
type: 'line',
label: 'Total',
yAxesID : "y-axis-2",
backgroundColor: "rgba(255,255,255,0.5)",
data: [0, 30, 62, 100, 100, 100, 114, 77, 57, 54, 10, 10],
borderColor: 'rgba(255, 93, 0, 0.6)',
borderWidth: 2
}
dataset.push(lineDataset);
var ctx = $('#throughput-canvas');
mainThroughputChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["13:30", "13:40", "13:50", "14:00", "14:10", "14:20", "14:30", "14:40", "14:50", "15:00", "15:10", "15:20"],
datasets: dataset
},
options: {
scales: {
yAxes: [{
id:"y-axis-1",
position:'left',
type: 'linear',
ticks: {
beginAtZero:true
},
scaleLabel: {
display: true,
labelString: 'Throughput'
}
},
{
id:"y-axis-2",
position:'right',
type: 'linear',
/*ticks: {
beginAtZero:true
},*/
scaleLabel: {
display: true,
labelString: 'Attendance'
}
}],
xAxes : [{
gridLines : {
display : false
},
scaleLabel: {
display: true,
labelString: 'Time'
}
}]
},
}
});
没关系,在Github上找到了答案。 事实证明,这是数据集对象属性中的拼写错误,应该yAxisID
。
https://jsfiddle.net/17mw40rx/1/
相关文章:
- 使用Javascript对象为具有两个背景图像的DIV设置样式时出现问题
- 同一页面上有两个谷歌图表的渲染问题
- 带有两个提交按钮的提交表单,每个按钮执行不同的操作问题
- 我的if和else-if逻辑中的问题以及两个函数的冲突
- 计算两个GPS坐标之间的指南针方位的问题
- CRM 2011+问题与javascript中的两个选项集
- 两个用户通过 websocket 编辑输入时出现问题
- 我有两个问题!一个是打印,另一个是缩放
- 如何清除两个提交按钮的验证问题
- OpenLayers 3.13:通过链接两个视图来提供绑定To的问题
- 关于 JavaScript 函数的两个问题
- 谷歌地图Javascript问题有两个函数
- 使用两个函数时出现 Jquery 问题
- 同时打开两个下拉列表时出现问题
- 在 Three.JS 中对齐来自两个单独对象的面时出现问题
- Rails 基文件具有调用函数 C 的函数 A,但 C 是在两个 JS 文件中定义的.如何按页解决此问题
- 为什么两个网页有不同的本地存储?我该如何解决这个问题
- 组合两个脚本以在所有浏览器上保存Google图表时出现问题
- 使用ECMA从SharePoint欢迎页面查询两个不同列表时出现问题
- css的问题很重要,当与两个类一起使用时