У меня есть требования к дизайну для отображения линейного графика с 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: "#fdcf7e",                          
                        pointHighlightStroke: "#FFF",
                        data: [null,29.9,30.4,29.5,29.6,30.2,29.4,29.8,26.9,27,28.5,26.8,28.5]
                     },                                        
                    {
                        label: "hemoglobin_5",
                        fillColor: "transparent",
                        strokeColor: "#a33a59",
                        pointColor: "#a33a59",
                        pointHighlightStroke: "#FFF",
                        data: [null,11.8,11.4,11.9,11.9,11.5,12.2,11.7,11.8,10.9,10.7,11.3,11.3]
                    }
                ]
            };

            var options = {
                responsive: true,
                scaleOverride: true,
                scaleSteps: 10,
                scaleStepWidth: 5,
                scaleStartValue: 0,
                showTooltips: false,
                pointDot: true,
                pointDotRadius : 6,
                datasetStrokeWidth : 3,
                bezierCurve : false,
                scaleShowHorizontalLines: false,
                scaleGridLineWidth : 2,
                scaleGridLineColor : "#EEEEEE",
                scaleLineWidth: 3,
                scaleLineColor: "#000000",
                scaleFontFamily: '"Gotham Book",sans-serif',
                scaleFontSize: 18
            }

            var ctx = $("#myChart").get(0).getContext("2d");
            var Trends = new Chart(ctx).Line(data, options);