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

问题描述

我正在尝试在 Chart.js 中添加双 Y 轴以进行两个数据集比较.我目前正在使用 Leigh Quince 的 LineBar 扩展，这是在这里找到的答案:

您可以在此处获取修改后的 Chart.js 文件 >> https://github.com/khertan/Chart.js/tree/9edcc71f97361bb45c8fe93d07acb1917c2b4807

您只需将选项添加到您的 options 变量中:

var 选项 = {...scaleUse2Y:真，...};

然后实例化一个普通的折线图:

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

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

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?

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.

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:

(Seems Stackoverflow has changed the color of it on me, hope you can still read the Y-Axis scales)

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.

Thank you!

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

You can grab the modified Chart.js file here >> https://github.com/khertan/Chart.js/tree/9edcc71f97361bb45c8fe93d07acb1917c2b4807

You'll only need to add the option to your options variable:

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.

这篇关于如何在 Chart.js 中为条形图和折线图添加第二个 Y 轴?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！