结合不同粒度的chart.js条形图和折线图 [英] Combine chart.js bar and line charts with differing granularity
问题描述
以下HTML页面生成组合的条形图和线形图：
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?
推荐答案
标签数组中的值数是将在图表上显示的值数。
The number of values in the labels array is the number of values that will be shown on the chart.
这篇关于结合不同粒度的chart.js条形图和折线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
