简体   繁体   中英

chart.js won't display the chart in IE

I developped a webpage to display any kind of time based data, and i want to display it. Here is the important part of my script :

function updateData(chart, label, data) {
    chart.data.labels = label;
    chart.data.datasets.forEach(function (dataset) {
        dataset.data = data;
    });
    chart.update();
}

$(".lineChart").each(function () {
        var current = $(this).attr("capteur")
        var prop = $(this).attr("prop")
        var color = null;
        var type = $(this).attr("type")

        switch ($(this).attr("type")) {
            case "Gaz": {
                color = getColor(1);
                break;
            }
            case "Electricite": {
                color = getColor(2);
                break;
            }
            case "Eau": {
                color = getColor(3);
                break;
            }
        }

        var datasets = [];
        var labels = []

        if (datas[current][prop].lineChart.values) {
            labels.push(datas[current][prop].lineChart.dates)
            datasets.push({
                label: datas[current][prop].lineChart.nom,
                fill: false,
                borderColor: color,
                backgroundColor: color,
                pointRadius: 2,
                data: datas[current][prop].lineChart.values
            });
        }

        datas[current][prop].lineChart.chart = new Chart($(this).get(), {
            type: 'line',
            data: {
                labels: labels,
                datasets: datasets
            },
            options: {
                scales: {
                    xAxes: [{
                        type: 'time',
                        unit: 'day',
                        unitStepSize: 1,
                        time: {
                            displayFormats: {
                                'second': 'mm:ss',
                                'minute': 'HH:mm',
                                'hour': 'DD HH:mm',
                                'day': 'MMM DD',
                                'week': 'MMM DD',
                                'month': 'MMM DD',
                                'quarter': 'MMM DD',
                                'year': 'YYYY MMM',
                            }
                        },
                        display: true,
                        scaleLabel: {
                            display: false,
                            labelString: datas[current][prop].lineChart.nom,

                        }

                    }],
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: datas[current][prop].lineChart.unite
                        }
                    }]
                },
                tooltips: {
                    callbacks: {
                        title: function (tooltipItem, data) {
                            var maDate = new Date(data.labels[tooltipItem[0].index]);
                            return moment(data.labels[tooltipItem[0].index]).format('[Date ] DD/MM/YYYY HH:mm:ss ');
                        },
                        label: function (tooltipItem, data) {
                            var amount = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                            var total = eval(data.datasets[tooltipItem.datasetIndex].data.join("+"));
                            return 'Valeur ' + amount + datas[current][prop].lineChart.unite;
                        },
                        //footer: function(tooltipItem, data) { return 'Total: 100 planos.'; }
                    }
                },
                title: {
                    display: true,
                    text: 'Consommation ' + type + ' instantanée'
                }
            }
        });
    })

The chart will display fine on each navigator, except on IE, as you can see there :

在Chrome上

在IE上

I expected some error, but nothing on the console. And the debugger let me show that data is received by both of the webbrowser.

So is my code look good ?

As Surely said, to fix the problem, you'll have to add the following before init charts :

if (Number.MAX_SAFE_INTEGER === undefined) {
    Number.MAX_SAFE_INTEGER = 9007199254740991;
}
if (Number.MIN_SAFE_INTEGER === undefined) {
    Number.MIN_SAFE_INTEGER = -9007199254740991;
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM