首页 文章

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

提问于
浏览
8

我试图在Chart.js中添加一个双Y轴进行两次数据集比较 . 我是'm currently using Leigh Quince'的LineBar扩展,这是在这里找到的答案:Chart.js how to get Combined Bar and line charts?

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

我的问题是我需要将TSAT%(饱和度水平),左Y轴,折线图表示为铁蛋白剂量水平,右Y轴条形图 . 这就是我需要的样子:

TSAT/Ferritin Chart

(似乎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添加内容,如果我成功添加了示例,我将编辑并添加链接 .

谢谢!

1 回答

  • 6

    要显示带有两个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的master分支合并的原因 . 耐心的2.0版本发布 .

相关问题