在混合图表上显示值,Charts.js

时间:2017-06-01 17:55:05

标签: javascript graph chart.js

我一直在使用charts.js几天,我无法在条形图和折线图上自动显示这些值。我使用的是混合图表,我并不关心价值观的最终结果。我只需要他们在那里。我对此非常陌生,所以我将不胜感激。

以下是我的图表的代码:

 var chartData = {
           labels: Des_final,

            datasets: [{
                type: 'bar',
                label: 'Total downtime',
                borderColor: window.chartColors.blue,
               showLabels: true, 
                borderWidth: 2,
                fill: true,

                 yAxisID: "y-axis-1",
                data: Total_DT_final,

            }, {
                type: 'line',
                label: 'Running Percentage',
                fill:false,
                backgroundColor: window.chartColors.red,
                 yAxisID: "y-axis-2",
                data:Run_Per_final

            }, 
       ]
        };


        window.onload = function() {
            var ctx = document.getElementById("canvas").getContext("2d");
            window.myMixedChart = new Chart(ctx, {
                type: 'bar',
                data: chartData,
                options: {
                    responsive: true,




                    title: {
                        display: true,
                        text: 'Operations Chart'
                    },

                    scales: {
                         yAxes: [{
                        type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                        display: true,
                        position: "left",
                        id: "y-axis-1",
                    }, {
                        type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                        display: true,
                        position: "right",
                        id: "y-axis-2",
                        gridLines: {
                            drawOnChartArea: false
                        }
                    }],





    xAxes: [{
        stacked: false,
        beginAtZero: true,
        scaleLabel: {
            labelString: 'Month'
        },
        ticks: {
            stepSize: 1,
            min: 0,
            autoSkip: false
        }
    }]
},
                    tooltips: {
                        mode: 'index',
                        intersect: true



             }
                }
            });
        };

1 个答案:

答案 0 :(得分:0)

这可能是数据不匹配问题,例如' Run_Per_final'的长度与“Total_DT_final”的长度不同。或者' Des_final',我只是在猜测