0
下面的HTML頁面生成組合棒和線圖：結合chart.js之條形圖和折線圖具有不同粒度
<html>
<head>
<title>Combo Bar-Line Chart</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div style="width: 800px">
<canvas id="canvas"></canvas>
</div>
<script>
var barChartData = {
labels: ["a","b","c","d","e","f","g"],
datasets: [{
type: 'bar',
label: 'Revenue Per Share',
backgroundColor: "#eeeeee",
data: [
4.24,
4.57,
4.70,
5.10,
5.25,
5.76,
6.19
],
borderColor: '#aaaaaa',
borderWidth: 1,
pointRadius: 0,
fill: true,
yAxisID: 'y-axis-1'
}, {
type: 'line',
label: 'Share Price',
backgroundColor: '#88CCFF',
data:
[
40,
90,
45,
50,
60,
70,
80
],
options: {
scales: {
xAxes: [{
ticks: {
max: 10,
min: 0,
stepSize: 0.5
}
}]
}
},
borderColor: '#aaaaaa',
borderWidth: 1,
pointRadius: 0,
fill: true,
yAxisID: 'y-axis-2'
}, ]
};
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
legend: {
display: false,
},
responsive: true,
tooltips: {
mode: 'label'
},
elements: {
line: {
fill: false
}
},
scales: {
xAxes: [{
display: true,
gridLines: {
display: false
},
labels: {
show: true,
}
}],
yAxes: [{
type: "linear",
display: true,
position: "left",
id: "y-axis-1",
gridLines:{
display: true
},
labels: {
show: true,
}
}, {
type: "linear",
display: true,
position: "right",
id: "y-axis-2",
gridLines:{
display: false
},
labels: {
show: true,
}
}]
}
}
});
};
</script>
</body>
</html>
項中的每個數據集爲這兩個圖表類型的數量是目前相等。
我想增加折線圖的粒度，以便它可以在同一區域內顯示更多細節，但是，當更多項目添加到折線圖數據集時，而不是顯示更多細節時，額外的項目是切斷，所以不顯示。
data:
[
40,
60,
90,
60,
45,
55,
50,
55,
60,
65,
70,
75,
80
],
如何增加折線圖的粒度？