chart.js的图表在Edge和Firefox中无法显示。

问题描述 投票：0回答：1

我有一个chartjs脚本，它可以在chorme中运行，并显示2个时期的比较数据，但我用Edge或Firefox运行它，它只显示图表的框架，没有数据，没有错误信息。但我用Edge或Firefox运行它，它只显示图表的框架，没有数据，没有错误信息。我想让我的图表看起来像同类型的 https:/www.chartjs.orgsampleslatestchartsbarvertical.html. 我的代码有什么问题？谁能帮帮我，谢谢！我的脚本如下。

<!doctype html>
<html>
<head>
    <title>Bar Chart</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
    <style>
        canvas {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }
    </style>
</head>

<body>
<div style="width:75%;">
    <canvas id="canvas"></canvas>
</div>
<script>

    var config = {
        type:    'bar',
        data:    {
            datasets: [
                {label: "Year: 2019 " ,
  data: [{ x: "01", y: 100 },
         { x: "02", y: 175 },
         { x: "03", y: 178 },
         { x: "04", y: 300 }],
                    fill: false,
                    borderColor: 'blue',
                    backgroundColor: 'blue'},

  {label: "Year: 2020 "  ,
  data: [{ x: "01", y: 120 },
         { x: "02", y: 145 },
         { x: "03", y: 158 },
         { x: "04", y: 200 }],
                    fill: false,
                    borderColor: 'green',
                    backgroundColor: 'green'},
            ]
        },
        options: {
            responsive: true,
            title:      {
                display: true,
                text:    "Comparsion of 2 periods"
            },
            scales:     {
                xAxes: [{
                    type:       "time",
                    time:       {
                        unit: 'month',
                        displayFormats: {
                                          month: 'MMM'}
                    },
                    offset: true,
                    scaleLabel: {
                        display:     true,
                        labelString: 'Time'
                    }
                }],
                yAxes: [{
                    scaleLabel: {
                        display:     true,
                        labelString: 'Consumption'

                    },
                    ticks: {
                       beginAtZero : true
                       }
                }]
            }
        }
    };

    window.onload = function () {
        var ctx       = document.getElementById("canvas").getContext("2d");
        window.myLine = new Chart(ctx, config);
    };

</script>

</body>

</html>
chart.js
1个回答
0
投票

你的比例尺被扔掉的画布。它似乎像 Axes 中的scales对象似乎是问题所在。而不是让Moment.js弄清了 01 是Jan等等，我添加了一个标签对象。

另外，请注意，我在图表的构造函数中使用了与config相同的逻辑，但我将不同的配置片段分解在不同的变量中。这样很容易排除故障。

试试这个。它可以在Edge、Firefox、IE11和Chrome上工作。

<!doctype html>
<html>
<head>
    <title>Bar Chart</title>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
    <style>
        canvas {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }
    </style>
</head>

<body>
<div style="width:75%;">
    <canvas id="canvas"></canvas>
</div>

<script>
var barChartData =  {
    labels: ['January', 'February', 'March', 'April'],
    datasets: [{
        label: "Year: 2019 " ,
        borderColor: 'blue',
        backgroundColor: 'blue',
        borderWidth: 1,
        data: [
            { x: "1", y: 100 },
            { x: "2", y: 175 },
            { x: "3", y: 178 },
            { x: "4", y: 300 }
        ]
    }, {
        label: "Year: 2020 "  ,
        borderColor: 'green',
        backgroundColor: 'green',
        borderWidth: 1,
        data: [
            { x: "1", y: 120 },
             { x: "2", y: 145 },
             { x: "3", y: 158 },
             { x: "4", y: 200 }
        ]
    }]
};

var barChartScales = {
    yAxes: [{
        scaleLabel: {
            display:     true,
            labelString: 'Consumption'
        },
        ticks: {
           beginAtZero : true
        }
    }]
}

var config = {
    type: 'bar',
    data: barChartData,
    options: {
        responsive: true,
        legend: {
            position: 'top',
        },
        title: {
            display: true,
            text: 'Comparsion of 2 periods'
        },
        scales: barChartScales
    }
}

window.onload = function() {
    var ctx = document.getElementById('canvas').getContext('2d');
    window.myBar = new Chart(ctx, config);
};
</script>

</body>

</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.