如何为Chart.js中的条形图和折线图添加第二个Y轴？ [英] How to add second Y-axis for Bar and Line chart in Chart.js?

问题描述

我想在Chart.js中为两个数据集比较添加一个双Y轴。我目前使用Leigh Quince的LineBar扩展，这是在这里找到的答案：

您可以在此处获取修改的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版本发布的耐心。
 
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轴？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！