如何在Chart.js中为条形图和折线图添加第二个Y轴？

我试图在Chart.js中添加一个双Y轴进行两次数据集比较。 我目前正在使用Leigh Quince的LineBar扩展，这是在这里找到的答案： Chart.js如何获得组合条形图和折线图？

大约一年前还有一个针对双Y轴的解决方案，但仅用于折线图，并且它与Nick的主人不同步。 似乎有Line和Bar图表，或Double-Y但不是两者。

我的问题是我需要将TSAT％（饱和度水平），左Y轴，折线图表示为铁蛋白剂量水平，右Y轴条形图。 这就是我需要的样子：

（似乎Stackoverflow已经改变了它的颜色，希望你仍然可以读取Y轴刻度）

如果有人可以使用解决方案，我将非常感激。

当前代码：

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); 

顺便说一句……我修改了Quince的LineBar来先渲染Bar然后再渲染线条。 代码原来是颠倒过来的。 因此，我可能无法向jsfiddle添加内容，如果我成功添加了示例，我将编辑并添加链接。

谢谢！

Answer 1

为了显示带有两个Y轴的折线图，@ khertan发出拉动请求以添加此function>> https://github.com/nnnick/Chart.js/pull/1355

你可以在这里获取修改过的Chart.js文件>> https://github.com/khertan/Chart.js/tree/9edcc71f97361bb45c8fe93d07acb1917c2b4807

您只需要将选项添加到您的options变量：

 var options = { ... scaleUse2Y: true, ... }; 

然后实例化一个正常的折线图：

 var chart = new Chart(ctx).Line(data, options); 

问题是，如果你使用像StackedBar这样的扩展，它可能会破坏……这一定是它尚未与Chart.js的master分支合并的原因。 耐心的2.0版本发布。