问题
The following HTML page generates a combined bar and line chart:
<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>
The number of items in each dataset for both of these chart types are currently equal.
I would like to increase the granularity of the line chart so that it will display more detail within the same area, however, when more items are added to the line chart dataset, rather than showing more detail, the extra items are cut off, so they are not displayed.
data:
[
40,
60,
90,
60,
45,
55,
50,
55,
60,
65,
70,
75,
80
],
How can I increase the granularity of the line chart?
回答1:
The number of values in the labels array is the number of values that will be shown on the chart.
来源：https://stackoverflow.com/questions/38640607/combine-chart-js-bar-and-line-charts-with-differing-granularity