小编JBM*_*ure的帖子

我试图在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: …

我有一个设计要求,要显示包含5个趋势数据数据集的折线图.沿着笔划线的每个数据值需要在其相应的数据点处显示数据值标签.

不幸的是,我无法在Charts.js中找到满足此要求的选项.

有没有可以帮助我的解决方法？

我也把它发布在小提琴上:http://jsfiddle.net/s9eannLh/

非常感谢!

    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: "hemoglobin_1",
                        title: "test",
                        fillColor: "transparent",
                        strokeColor: "#65204c",
                        pointColor: "#65204c",
                        pointHighlightStroke: "#FFF",
                        data: [null,5.7,5.7,5.8,5.7,5.8,5.7,5.9,6.7,6.7,6.5,6.4,6.4]
                    },
                    {
                        label: "hemoglobin_2",
                        fillColor: "transparent",
                        strokeColor: "#ed7141",
                        pointColor: "#ed7141",
                        pointHighlightStroke: "#FFF",
                        data: [null,15.5,15.5,15.6,15.2,15.6,15.1,15.8,17,17.4,16.8,16.4,16.4]
                    },                    
                    {
                        label: "hemoglobin_3",
                        fillColor: "transparent",
                        strokeColor: "#de4760",
                        pointColor: "#de4760",
                        pointHighlightStroke: "#FFF",
                        data: [null,37.1,37,37.2,37.6,36.9,37.6,36.8,37.6,38,37.5,39.1,37.5]
                    },
                    {
                        label: "hemoglobin_4",
                        fillColor: "transparent",
                        strokeColor: "#fdcf7e",
                        pointColor: …