javascript Chart.js 在条形图和折线图上具有双轴
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33236941/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Chart.js with dual axis on bar and line graph
提问by pureblackheart
I am using Quince's Chart.js version from this topic Chart.js how to get Combined Bar and line charts?. Bar and Line graph look very nice. Anyway, axis has to be separated into Y1 and Y2 which i cannot find that Quince's version support.
我正在使用来自本主题的 Quince 的 Chart.js 版本Chart.js 如何获得组合条形图和折线图？. 条形图和折线图看起来非常漂亮。无论如何，轴必须分成 Y1 和 Y2，我找不到 Quince 的版本支持。
I did search again and found this topic How to add second Y-axis for Bar and Line chart in Chart.js?which recommended to use Khertan's Chart.js which it can handle dual axis but i cannot find the way to combine bar and line within one plot.
我再次搜索并找到了这个主题如何在 Chart.js 中为条形图和折线图添加第二个 Y 轴？建议使用 Khertan 的 Chart.js，它可以处理双轴，但我找不到在一个图中组合条形和线条的方法。
I tried to input this option into Quince's version but it did not work.
我试图将此选项输入到 Quince 的版本中，但没有奏效。
scaleUse2Y: true,
Is there any way i can do this? Thank you for your kindly help.
有什么办法可以做到这一点吗？感谢您的热心帮助。
<script>
Chart.defaults.global.templateInterpolators = {
start: "[[",
end: "]]"
};
Chart.defaults.global.scaleLabel = "[[= value ]]";
Chart.defaults.global.tooltipTemplate = "[[if (label){]][[= label ]]: [[}]][[= value ]]";
Chart.defaults.global.multiTooltipTemplate = "[[= value ]]";
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
color:"#F7464A",
//new option, barline will default to bar as that what is used to create the scale
type: "line",
fillColor: "rgba(220,220,220,0.2)", //White
strokeColor: "rgba(220,220,220,1)", //gray
pointColor: "rgba(220,220,220,1)", //gray
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 20, 43, 81, 56, 55, 40]
}, {
label: "My First dataset",
color:"#F7464A",
//new option, barline will default to bar as that what is used to create the scale
type: "bar",
fillColor: "rgba(255, 187, 0, 1)",
strokeColor: "rgba(255, 187, 0, 1)",
pointColor: "rgba(255, 187, 0, 1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [32, 25, 43, 22, 12, 92, 33]
}]
};
//canvases
var lineBar = document.getElementById("line-bar").getContext("2d");
//charts
var myLineBarChart = new Chart(lineBar).Overlay(data);
In this HTML
在这个 HTML
<ul class="tabs"><li><input type="radio" name="tabs" id="tab1"checked />
<label for="tab1" onclick="rePlot(1,3)">2015</label>
<div id="tab-content1" class="tab-content" onclick="rePlot(1,3)">
<canvas group="canvas" id="line-bar" height="450" width="600" style="background-color:#8CDFD3;"></canvas>
</div>
</li>
<li><input type="radio" name="tabs" id="tab2" /><label for="tab2" onclick="rePlot(2,3)">2014</label>
<div id="tab-content2" class="tab-content" onclick="rePlot(2,3)">
<canvas group="canvas" id="line-bar" height="450" width="600" style="background-color:#8CDFD3;"></canvas>
</div>
</li>
<li><input type="radio" name="tabs" id="tab3" /><label for="tab3" onclick="rePlot(3,3)">2013</label>
<div id="tab-content3" class="tab-content" onclick="rePlot(3,3)">
<canvas group="canvas" id="line-bar" height="450" width="600" style="background-color:#8CDFD3;"></canvas>
</div>
</li>
</ul>
回答by Quince
I have finally pushed my port of multi axis feature to the master on this fork. As an extremely brief overview of what is happening i have added a collection of axes into the scale. Each axis is able to calculate where a value should be position in terms of y against it's own scale. The only thing that developers need to now do is say which axes group each dataset needs to belong. Each axis can also be told what colour it should be and what side of the graph it should appear on.
我终于在这个前叉上将我的多轴功能端口推送给了主人。作为对正在发生的事情的极其简短的概述，我在比例尺中添加了一组轴。每个轴都能够根据 y 相对于它自己的比例来计算值的位置。开发人员现在唯一需要做的就是说明每个数据集需要属于哪个轴组。每个轴也可以被告知它应该是什么颜色以及它应该出现在图形的哪一边。
How to use it - within each of your datasets declare a new property called yAxesGroup
如何使用它 - 在您的每个数据集中声明一个名为的新属性 yAxesGroup
datasets: [{
label: "My First dataset",
type: "bar",
yAxesGroup: "1", //any with same group will appear in the same axis, also this can be anything as long as you always refer to it with the same name
fillColor: "rgba(151,137,200,0.5)",
strokeColor: "rgba(151,137,200,0.8)",
highlightFill: "rgba(151,137,200,0.75)",
highlightStroke: "rgba(151,137,200,1)",
data: [28, 48, 40, 19, 86, 27, 90]
},
to then give more options to this axis add an extra property to the data called yAxiswhich is an array of axis options. By default each axis will show a scale on the left and in whatever colour is default or you have set as the overall font colour but here is where you can override them
然后为该轴提供更多选项，向称为yAxis轴选项数组的数据添加一个额外的属性。默认情况下，每个轴都会在左侧显示一个比例，并以默认颜色或您已设置为整体字体颜色的任何颜色显示，但在这里您可以覆盖它们
var overlayData = {
labels: ["January", "Februarya", "March", "April", "May", "Jun", "July"],
datasets: [{
label: "My First dataset",
type: "bar",
yAxesGroup: "1",
fillColor: "rgba(151,137,200,0.5)",
strokeColor: "rgba(151,137,200,0.8)",
highlightFill: "rgba(151,137,200,0.75)",
highlightStroke: "rgba(151,137,200,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}, {
label: "My Second dataset",
type: "line",
yAxesGroup: "2",
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: [8, 38, 30, 29, 46, 67, 80]
}],
yAxes: [{
name: "1",
scalePositionLeft: false,
scaleFontColor: "rgba(151,137,200,0.8)"
}, {
name: "2",
scalePositionLeft: true,
scaleFontColor: "rgba(151,187,205,0.8)"
}]
};
now this chart will have 2 axis, one on the left and one on the right.
现在此图表将有 2 个轴，一个在左侧，一个在右侧。
A few things to note, if any values are going to be below 0 you need to set the overall attribute of scaleBeginAtZeroto falseotherwise it gets a bit messed up. Also each axis will have it's own 0 base line so the 2 sides will not line up. this is as intended as i decided the reason you have two axis is because they are showing different scales so for everything to be sit in nicely 0 needs to at a different position for each axis.
需要注意的几件事，如果任何值将低于 0，您需要将 的整体属性设置为scaleBeginAtZero，false否则它会有点混乱。此外，每个轴都有自己的 0 基线，因此两侧不会对齐。这正如我决定你有两个轴的原因是因为它们显示不同的比例所以为了让所有东西都很好地坐在0需要每个轴的不同位置。
I have gone through and tested it for regression aginst other features i have added and it all seems to play nicely but if you do use this and notice anything, odd, let me know.
我已经通过我添加的其他功能进行了回归测试并测试了它，它似乎运行良好，但如果您确实使用它并注意到任何东西，奇怪，请告诉我。
Also i have not been able to write this as plugin for chartjs as so much is touched in the core that it does not make sense as such you would the built version from the fork and not just override an original version of chartjs.
此外，我还无法将其编写为 chartjs 的插件，因为在核心中涉及到太多内容，因此您从 fork 构建版本而不仅仅是覆盖 chartjs 的原始版本，这是没有意义的。
Overall this is the effect it will produce
总的来说这是它会产生的效果
var overlayData = {
labels: ["January", "Februarya", "March", "April", "May", "Jun", "July"],
datasets: [{
label: "My First dataset",
type: "bar",
yAxesGroup: "1",
fillColor: "rgba(151,137,200,0.5)",
strokeColor: "rgba(151,137,200,0.8)",
highlightFill: "rgba(151,137,200,0.75)",
highlightStroke: "rgba(151,137,200,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}, {
label: "My Second dataset",
type: "line",
yAxesGroup: "2",
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: [8, 38, 30, 29, 46, 67, 80]
}],
yAxes: [{
name: "1",
scalePositionLeft: false,
scaleFontColor: "rgba(151,137,200,0.8)"
}, {
name: "2",
scalePositionLeft: true,
scaleFontColor: "rgba(151,187,205,0.8)"
}]
};
window.onload = function () {
window.myOverlayChart = new Chart(document.getElementById("canvas").getContext("2d")).Overlay(overlayData, {
populateSparseData: true,
overlayBars: false,
datasetFill: true,
});
}<script src="https://raw.githack.com/leighquince/Chart.js/master/Chart.js"></script>
<canvas id="canvas" height="300" width="300"></canvas>