-1
A
回答
1
https://jsfiddle.net/qrwvvtxs/
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: 'Dataset 1',
yAxisID: "y-axis-1",
data: [3,2,7,4,5,7,6]
}, {
\t type: "line",
fill: false,
label: 'Dataset 2',
borderColor: '#faa',
backgroundColor: "#faa",
yAxisID: "y-axis-2",
data: [11,13,21,13,16,21,18]
}]
};
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
responsive: true,
title:{
display:true,
text:"Chart.js Bar Chart - Multi Axis"
},
tooltips: {
mode: 'index',
intersect: true
},
scales: {
yAxes: [{
display: true,
position: "left",
id: "y-axis-1",
ticks: {
callback: function(value, index, values) {
return value + " Kg";
}
}
}, {
display: true,
position: "right",
id: "y-axis-2",
gridLines: {
drawOnChartArea: false
},
ticks: {
callback: function(value, index, values) {
return "€ " + value;
}
}
}],
}
}
});
.wrapper {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
<div class="wrapper">
<canvas id="canvas"></canvas>
</div>
相关问题
- 1. Android折线图x轴值
- 2. 如何在图表js中添加X轴填充线图
- 3. 如何在剑道ui折线图中显示多个“X”轴?
- 4. C#excel设置折线图中X轴的最小/最大值
- 5. Highcharts折线图只有x轴
- 6. NVD3折线图X轴蜱缺少
- 7. 如何在flex中设置折线图的y轴最小值
- 8. 如何使用nvd3折线图在x轴上显示日期
- 9. RGraph:折线图。如何在X轴上制作两个标签?
- 10. 谷歌折线图x轴缩小过渡
- 11. 如何添加线图使用次y轴,但相同的x轴的BOX图
- 12. 如何从d3.js折线图更改x轴格式
- 13. 将轴添加到d3中的动态折线图
- 14. 如何创建堆积折线图D3,多Y轴和普通X轴
- 15. Sencha触摸图 - 如何在折线图中添加标签/值
- 16. 如何在条形图列中添加x轴文本
- 17. 添加上述X轴或在图形
- 18. 在谷歌折线图上的x轴排序数据
- 19. 设定x轴点距离在折线图
- 20. 在X轴上有大量标签的折线图
- 21. Excel折线图在空值处切x轴
- 22. chartjs折线图:在x轴上的缩放尊重值
- 23. 带有数据表的停靠在x轴下的折线图
- 24. 在X轴上有日期和时间的折线图
- 25. 隐藏CCC折线图中的X轴标签
- 26. 在gRaphael中将x轴和y轴添加到条形图?
- 27. 如何在X和Y轴上用实数绘制jfree折线图
- 28. 如何使用chart.js之固定在角图表的最大和最小X和Y轴 - 酒吧和折线图
- 29. 如何在WPF Toolkit折线图中交换坐标轴?
- 30. jFreeChart:如何在折线图中绘制y轴
谢谢,这competely回答我的问题。 – idontknow