javascript 如何在 Chart.js 中为条形图和折线图添加第二个 Y 轴？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28079139/
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
How to add second Y-axis for Bar and Line chart in Chart.js?
提问by JBMcClure
I am trying to add a double Y-axis in Chart.js for two dataset comparisons. I'm currently using Leigh Quince's LineBar extension which was the answer found here: Chart.js how to get Combined Bar and line charts?
我正在尝试在 Chart.js 中添加双 Y 轴以进行两个数据集比较。我目前正在使用 Leigh Quince 的 LineBar 扩展，这是在这里找到的答案：Chart.js 如何获得组合条形图和折线图？
There is also a solution written about a year ago for double Y-axis but only for a Line charts, and its way out of sync with Nick's master. Seems there's either Line and Bar charts, or Double-Y but not both.
还有一个大约一年前为双 Y 轴编写的解决方案，但仅适用于折线图，并且与尼克的主人不同步。似乎有折线图和条形图，或双 Y，但不是两者都有。
My issue here is that I need to represent TSAT % (Saturation levels), left Y-axis, Line Chart, to the amount of Ferritin dosage levels, right Y-axis Bar Chart. Here's what I need it to look like:
我的问题是，我需要将 TSAT %（饱和度水平），左侧 Y 轴，折线图，表示为铁蛋白剂量水平，右侧 Y 轴条形图。这是我需要的样子：
(Seems Stackoverflow has changed the color of it on me, hope you can still read the Y-Axis scales)
（似乎 Stackoverflow 在我身上改变了它的颜色，希望你仍然可以阅读 Y 轴比例）
If someone can comp up with a solution I would be greatly appreciative.
如果有人能提出解决方案，我将不胜感激。
Current code:
当前代码：
var data = {
labels: ["Jun 2013", "Jul 2013","Aug 2013","Sep 2013","Oct 2013","Nov 2013","Dec 2013", "Jan 2014", "Feb 2014", "Mar 2014", "Apr 2014", "May 2014"],
datasets: [
{
label: "TSAT",
type: "line",
fillColor: "transparent",
strokeColor: "#a33a59",
pointColor: "#a33a59",
pointHighlightStroke: "#FFF",
data:[33,32.9,32.9,33.2,33.2,33.2,32.7,32.9,32.9,32.7,32.7,32.7]
},
{
label: "Ferritin",
type: "bar",
fillColor: "#ed7141",
strokeColor: "#ed7141",
data: [939,929,949,991,992,993,976,976,973,986,972,939]
}
]
};
var options = {
responsive: true,
scaleOverride: true,
scaleSteps: 10,
scaleStepWidth: 5,
scaleStartValue: 0,
showTooltips: false,
pointDot: true,
pointDotRadius : 10,
datasetStrokeWidth : 3,
bezierCurve : false,
scaleShowLines: false,
scaleGridLineWidth : 2,
scaleGridLineColor : "#EEEEEE",
scaleLineWidth: 3,
scaleLineColor: "#000000",
scaleFontFamily: 'Gotham Book,sans-serif',
scaleFontSize: 18,
}
ctx = $("#myChart").get(0).getContext("2d");
TSATChart = new Chart(ctx).LineBar(data, options);
BTW... I modified Quince's LineBar to render Bar first then lines. The code originally had it reversed. As such, I may not be able to add something to jsfiddle, I will edit and add a link if I'm successful with adding an example there.
顺便说一句...我修改了 Quince 的 LineBar 以先渲染 Bar 然后再渲染线条。该代码最初将其颠倒了。因此，我可能无法向 jsfiddle 添加某些内容，如果我在那里成功添加了一个示例，我将编辑并添加一个链接。
Thank you!
谢谢！
回答by dalvallana
To show a Line Chart with two Y axis, @khertan made a pull request to add this feature >> https://github.com/nnnick/Chart.js/pull/1355
为了显示带有两个 Y 轴的折线图，@khertan 提出了添加此功能的拉取请求 >> https://github.com/nnnick/Chart.js/pull/1355
You can grab the modified Chart.js file here >> https://github.com/khertan/Chart.js/tree/9edcc71f97361bb45c8fe93d07acb1917c2b4807
您可以在此处获取修改后的 Chart.js 文件 >> https://github.com/khertan/Chart.js/tree/9edcc71f97361bb45c8fe93d07acb1917c2b4807
You'll only need to add the option to your optionsvariable:
您只需要将该选项添加到您的options变量中：
var options = {
...
scaleUse2Y: true,
...
};
And then instantiate a normal Line chart:
然后实例化一个普通的折线图：
var chart = new Chart(ctx).Line(data, options);
Problem is that if you're using an extension like StackedBar, for example, it will probably break... That must be the reason why it hasn't been merged with master's branch of Chart.js yet. Patience for the 2.0 version release.
问题是，例如，如果您使用像 StackedBar 这样的扩展，它可能会中断……这一定是它尚未与 Chart.js 的 master 分支合并的原因。耐心等待 2.0 版本的发布。
