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

Question

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

9

我正在尝试在Chart.js中添加双Y轴，以进行两个数据集的比较。我目前正在使用Leigh Quince的LineBar扩展，这是在此处找到的答案：Chart.js how to get Combined Bar and line charts? 大约一年前，也有一个关于双Y轴的解决方案，但仅适用于线性图表，并且与Nick的主程序相差甚远。似乎只有线性和条形图表，或者双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，先绘制柱形图，然后再绘制线条。原始代码是相反的。因此，如果我成功添加了示例到jsfiddle中，我可能无法添加任何内容，但我会进行编辑并添加链接。

谢谢！

- JBMcClure

1

嗨，在阅读了这篇文章之后，我现在已经修改了我的版本，以便先呈现条形图，然后再呈现线条。谢谢，这是一个更加合乎逻辑的顺序。 - Quince

谢谢Quince。很抱歉这么晚才说谢谢，因为我有一段时间没有评论权限。这个项目已经过去了，但是你的代码变更非常有用。 :) - JBMcClure

一个可用的JSFiddle示例 - http://jsfiddle.net/fixit/yny5f4s6/ - Yonatan Ayalon

1

嗨，可能有点晚了，但想让你知道我最终添加了多个y轴的功能，完整答案在最近发布的类似问题上的stackoverflow.com/questions/33236941/chart-js-with-dual-axis-on-bar-and-line-graph/33264462#33264462。 - Quince

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dalvallana · Accepted Answer

展示具有两个Y轴的折线图，@khertan提出了一个拉取请求以添加此功能>>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主分支合并的原因。耐心等待2.0版本发布。