stackoom
  简体   繁体   中英

ChartJs + ie11 doesn't work

 原文  2018-04-18 16:15:53  8   2    javascript/ internet-explorer/ chart.js/ internet-explorer-11

Question

When i am trying to load my chart.js line graph with about 2000 points graph "crash" as seen in photo. It works in all browsers includin Edge but not in internet explorer 11. I would need your help with this problem. Image: Randered graph .

Console doesnt return any error.

    Chart.defaults.global.animation.duration = 0;
var ctx = document.getElementById("canvas").getContext("2d");
var config = {
    data: lineChartData,

    options: {

        annotation: {
            annotations: [{
                type: 'line',
                mode: 'horizontal',
                scaleID: 'y-axis-0',
                value: <?php echo $data['max']; ?>,

                borderColor: 'rgba(231, 76, 60,1.0)',
                borderWidth: 0.5
            }, {
                type: 'line',
                mode: 'horizontal',
                scaleID: 'y-axis-0',
                value: <?php echo $data['min']; ?>,
                borderColor: 'rgba(231, 76, 60,1.0)',
                borderWidth: 0.5
            }]
        },
        responsive: true,
        elements: {
            point: {
                radius: 0,
                pointHitRadius: 1
            }
        },
        hoverMode: 'index',
        stacked: false,
        tooltips: {
            mode: 'index',
            intersect: false
        },

        scales: {
            xAxes: [{
                type: 'time',
                time: {
                    displayFormats: {
                        'millisecond': 'DD MMM',
                        'second': 'DD MMM',
                        'minute': 'DD MMM',
                        'hour': 'DD MMM',
                        'day': 'DD MMM',
                        'week': 'DD MMM',
                        'month': 'DD MMM',
                        'quarter': 'DD MMM',
                        'year': 'DD MMM',
                    },
                    unitStepSize: 1,
                    unit: 'day',
                },
                gridLines: {
                    display: false,
                }
            }]

        }
    }
};



config.data.datasets.forEach(function(dataset) {
    dataset.borderColor = colr;
    dataset.backgroundColor = colr;

});


window.myLine = Chart.Line(ctx, config);

I allready tried to change Doctype, checking code in JSHint but it doesn't work.

2 answers

solution1
 1 ACCPTED  2018-04-19 12:41:38

In some of your data, eg,

{y:25.9,x:"2018-04-18 12:37:38\\n"}

You have an extra \\n which is causing the date to be invalid, remove this and the graph appears to work as intended.

I modified some border widths. 

 <head> <title>Test </title> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script type="text/javascript"> if (Number.MAX_SAFE_INTEGER === undefined) { console.log("max increase;"); Number.MAX_SAFE_INTEGER = 9007199254740991; } if (Number.MIN_SAFE_INTEGER === undefined) { Number.MIN_SAFE_INTEGER = -9007199254740991; console.log("min idecrease;"); } </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"> </script> <script type="text/javascript"> if (Number.MAX_SAFE_INTEGER === undefined) { console.log("max increase;"); Number.MAX_SAFE_INTEGER = 9007199254740991; } if (Number.MIN_SAFE_INTEGER === undefined) { Number.MIN_SAFE_INTEGER = -9007199254740991; console.log("min idecrease;"); } </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js"> </script> </head> <body> <div style="width:95%;"> <canvas id="canvas" style="height:400px;"> </canvas> </div> <script> Chart.defaults.global.animation.duration = 0; if (Number.MAX_SAFE_INTEGER === undefined) { console.log("max increase;"); Number.MAX_SAFE_INTEGER = 9007199254740991; } if (Number.MIN_SAFE_INTEGER === undefined) { Number.MIN_SAFE_INTEGER = -9007199254740991; console.log("min idecrease;"); } var ctx = document.getElementById("canvas").getContext("2d"); var yourImage = new Image(); yourImage.src ="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="; yourImage.width ="2"; yourImage.height ="15"; var lineChartData = { datasets: [ { label: "0", fill: false, hidden: true, borderWidth: 3, data:[{ y:25.3,x:"2018-04-18 12:16:02"} ,{ y:25.9,x:"2018-04-18 12:23:30"} ,{ y:25.9,x:"2018-04-18 12:30:35"} ,{ y:25.9,x:"2018-04-18 12:37:38"} ,{ y:25.9,x:"2018-04-18 12:44:42"} ,{ y:25.8,x:"2018-04-18 12:51:45"} ,{ y:25.7,x:"2018-04-18 12:58:50"} ,{ y:25.6,x:"2018-04-18 13:00:37"} ,{ y:25.6,x:"2018-04-18 13:05:56"} ,{ y:26,x:"2018-04-18 13:09:49"} ,{ y:25.6,x:"2018-04-18 13:10:42"} ,{ y:26,x:"2018-04-18 13:11:35"} ,{ y:25.7,x:"2018-04-18 13:12:28"} ,{ y:25.8,x:"2018-04-18 13:13:21"} ,{ y:26,x:"2018-04-18 13:16:52"} ,{ y:26.2,x:"2018-04-18 13:20:23"} ,{ y:26.2,x:"2018-04-18 13:27:42"} ,{ y:26.2,x:"2018-04-18 13:34:44"} ,{ y:26.2,x:"2018-04-18 13:41:47"} ,{ y:26.3,x:"2018-04-18 13:42:40"} ,{ y:26.3,x:"2018-04-18 13:48:50"} ,{ y:26.4,x:"2018-04-18 13:55:51"} ,{ y:26.4,x:"2018-04-18 14:02:53"} ,{ y:26.5,x:"2018-04-18 14:09:55"} ,{ y:26.6,x:"2018-04-18 14:11:40"} ,{ y:26.6,x:"2018-04-18 14:16:57"} ,{ y:26.6,x:"2018-04-18 14:23:59"} ,{ y:26.7,x:"2018-04-18 14:31:01"} ,{ y:26.7,x:"2018-04-18 14:38:05"} ,{ y:26.7,x:"2018-04-18 14:45:07"} ,{ y:26.8,x:"2018-04-18 14:52:10"} ,{ y:26.8,x:"2018-04-18 14:59:12"} ,{ y:26.8,x:"2018-04-18 15:06:14"} ,{ y:26.8,x:"2018-04-18 15:13:17"} ,{ y:26.8,x:"2018-04-18 15:20:20"} ,{ y:26.8,x:"2018-04-18 15:27:23"} ,{ y:26.8,x:"2018-04-18 15:34:25"} ,{ y:26.9,x:"2018-04-18 15:37:58"} ,{ y:26.9,x:"2018-04-18 15:41:29"} ,{ y:27,x:"2018-04-18 15:48:34"} ,{ y:27,x:"2018-04-18 15:56:25"} ,{ y:27,x:"2018-04-18 16:03:29"} ,{ y:27.1,x:"2018-04-18 16:09:38"} ,{ y:27.1,x:"2018-04-18 16:10:31"} ,{ y:27.1,x:"2018-04-18 16:17:34"} ,{ y:27.1,x:"2018-04-18 16:24:38"} ,{ y:27.1,x:"2018-04-18 16:31:40"} ,{ y:27.2,x:"2018-04-18 16:38:43"} ] } , { label: "2", fill: false, hidden: true, borderWidth: 3, data:[{ y:32.4,x:"2018-04-18 12:16:02"} ,{ y:32.7,x:"2018-04-18 12:17:48"} ,{ y:32.2,x:"2018-04-18 12:18:40"} ,{ y:32,x:"2018-04-18 12:20:27"} ,{ y:25.5,x:"2018-04-18 12:23:30"} ,{ y:25.2,x:"2018-04-18 12:27:55"} ,{ y:25.2,x:"2018-04-18 12:30:35"} ,{ y:25.5,x:"2018-04-18 12:35:52"} ,{ y:25.5,x:"2018-04-18 12:37:38"} ,{ y:25.7,x:"2018-04-18 12:44:42"} ,{ y:25.8,x:"2018-04-18 12:45:35"} ,{ y:25.9,x:"2018-04-18 12:51:45"} ,{ y:26.3,x:"2018-04-18 12:57:57"} ,{ y:26.4,x:"2018-04-18 12:58:50"} ,{ y:25.9,x:"2018-04-18 13:00:37"} ,{ y:26.3,x:"2018-04-18 13:01:30"} ,{ y:26.9,x:"2018-04-18 13:05:02"} ,{ y:27.4,x:"2018-04-18 13:05:56"} ,{ y:27.7,x:"2018-04-18 13:06:49"} ,{ y:29.5,x:"2018-04-18 13:07:42"} ,{ y:25.8,x:"2018-04-18 13:09:49"} ,{ y:26.5,x:"2018-04-18 13:10:42"} ,{ y:25.8,x:"2018-04-18 13:11:35"} ,{ y:25.5,x:"2018-04-18 13:12:28"} ,{ y:26.4,x:"2018-04-18 13:12:28"} ,{ y:25.8,x:"2018-04-18 13:13:21"} ,{ y:25.2,x:"2018-04-18 13:15:59"} ,{ y:25.6,x:"2018-04-18 13:16:52"} ,{ y:25.3,x:"2018-04-18 13:18:37"} ,{ y:25.4,x:"2018-04-18 13:20:23"} ,{ y:25,x:"2018-04-18 13:21:16"} ,{ y:25.3,x:"2018-04-18 13:23:01"} ,{ y:24.8,x:"2018-04-18 13:23:54"} ,{ y:24.5,x:"2018-04-18 13:24:11"} ,{ y:24.2,x:"2018-04-18 13:26:49"} ,{ y:24.6,x:"2018-04-18 13:27:42"} ,{ y:24.9,x:"2018-04-18 13:28:35"} ,{ y:25.1,x:"2018-04-18 13:30:20"} ,{ y:25.4,x:"2018-04-18 13:32:58"} ,{ y:25.1,x:"2018-04-18 13:34:44"} ,{ y:25.6,x:"2018-04-18 13:36:30"} ,{ y:25.9,x:"2018-04-18 13:38:16"} ,{ y:25.6,x:"2018-04-18 13:40:01"} ,{ y:25.3,x:"2018-04-18 13:40:54"} ,{ y:25.5,x:"2018-04-18 13:41:47"} ,{ y:25.6,x:"2018-04-18 13:42:40"} ,{ y:25.4,x:"2018-04-18 13:43:33"} ,{ y:25.1,x:"2018-04-18 13:44:25"} ,{ y:25.4,x:"2018-04-18 13:46:11"} ,{ y:25.6,x:"2018-04-18 13:47:57"} ,{ y:25.5,x:"2018-04-18 13:48:50"} ,{ y:25.3,x:"2018-04-18 13:52:20"} ,{ y:25,x:"2018-04-18 13:53:13"} ,{ y:24.7,x:"2018-04-18 13:54:06"} ,{ y:24.7,x:"2018-04-18 13:55:51"} ] } , { label: "1", fill: false, borderWidth: 3, data:[{ y:9.9,x:"2018-04-18 12:16:02"} ,{ y:9.6,x:"2018-04-18 12:16:55"} ,{ y:9.2,x:"2018-04-18 12:19:33"} ,{ y:8.8,x:"2018-04-18 12:22:37"} ,{ y:8.7,x:"2018-04-18 12:23:30"} ,{ y:8.6,x:"2018-04-18 12:24:23"} ,{ y:8.3,x:"2018-04-18 12:27:02"} ,{ y:8.1,x:"2018-04-18 12:28:49"} ,{ y:7.9,x:"2018-04-18 12:30:35"} ,{ y:7.8,x:"2018-04-18 12:32:21"} ,{ y:7.6,x:"2018-04-18 12:35:00"} ,{ y:7.5,x:"2018-04-18 12:37:38"} ,{ y:7.3,x:"2018-04-18 12:41:11"} ,{ y:7.1,x:"2018-04-18 12:43:49"} ,{ y:7.1,x:"2018-04-18 12:44:42"} ,{ y:6.9,x:"2018-04-18 12:51:45"} ,{ y:6.8,x:"2018-04-18 12:53:31"} ,{ y:6.7,x:"2018-04-18 12:58:50"} ,{ y:6.6,x:"2018-04-18 13:00:37"} ,{ y:6.5,x:"2018-04-18 13:05:56"} ,{ y:6.4,x:"2018-04-18 13:13:21"} ,{ y:6.3,x:"2018-04-18 13:20:23"} ,{ y:6.5,x:"2018-04-18 13:25:57"} ,{ y:6.4,x:"2018-04-18 13:27:42"} ,{ y:6.4,x:"2018-04-18 13:34:44"} ,{ y:6.3,x:"2018-04-18 13:39:08"} ,{ y:6.3,x:"2018-04-18 13:41:47"} ,{ y:6.3,x:"2018-04-18 13:48:50"} ] } ,{ label: "6", data: [{ y:"0",x:"2018-04-18 12:16:02"} ,{ y:"1",x:"2018-04-18 12:20:52"} ,{ y:"0",x:"2018-04-18 12:21:45"} ,{ y:"0",x:"2018-04-18 12:23:30"} ,{ y:"0",x:"2018-04-18 12:30:35"} ,{ y:"0",x:"2018-04-18 12:37:38"} ,{ y:"0",x:"2018-04-18 12:44:42"} ,{ y:"0",x:"2018-04-18 12:51:45"} ,{ y:"0",x:"2018-04-18 12:58:50"} ,{ y:"0",x:"2018-04-18 13:05:56"} ,{ y:"0",x:"2018-04-18 13:13:21"} ,{ y:"0",x:"2018-04-18 13:20:23"} ,{ y:"1",x:"2018-04-18 13:24:00"} ,{ y:"0",x:"2018-04-18 13:25:04"} ,{ y:"0",x:"2018-04-18 13:27:42"} ,{ y:"0",x:"2018-04-18 13:34:44"} ,{ y:"0",x:"2018-04-18 13:41:47"} ,{ y:"0",x:"2018-04-18 13:48:50"} ,{ y:"0",x:"2018-04-18 13:55:51"} ,{ y:"0",x:"2018-04-18 14:02:53"} ,{ y:"0",x:"2018-04-18 14:09:55"} ,{ y:"0",x:"2018-04-18 14:16:57"} ,{ y:"0",x:"2018-04-18 14:23:59"} ,{ y:"0",x:"2018-04-18 14:31:01"} ,{ y:"0",x:"2018-04-18 14:38:05"} ,{ y:"0",x:"2018-04-18 14:45:07"} ,{ y:"0",x:"2018-04-18 14:52:10"} ,{ y:"0",x:"2018-04-18 14:59:12"} ,{ y:"0",x:"2018-04-18 15:06:14"} ,{ y:"0",x:"2018-04-18 15:13:17"} ,{ y:"0",x:"2018-04-18 15:20:20"} ,{ y:"0",x:"2018-04-18 15:27:23"} ,{ y:"0",x:"2018-04-18 15:34:25"} ,{ y:"0",x:"2018-04-18 15:41:29"} ,{ y:"0",x:"2018-04-18 15:48:34"} ,{ y:"1",x:"2018-04-18 15:55:07"} ,{ y:"0",x:"2018-04-18 15:56:25"} ,{ y:"0",x:"2018-04-18 16:03:29"} ,{ y:"0",x:"2018-04-18 16:10:31"} ,{ y:"0",x:"2018-04-18 16:17:34"} ,{ y:"0",x:"2018-04-18 16:24:38"} ,{ y:"0",x:"2018-04-18 16:31:40"} ,{ y:"0",x:"2018-04-18 16:38:43"} ,{ y:"0",x:"2018-04-18 16:45:45"} ,{ y:"0",x:"2018-04-18 16:52:47"} ,{ y:"0",x:"2018-04-18 16:59:49"} ,{ y:"0",x:"2018-04-18 17:06:52"} ,{ y:"0",x:"2018-04-18 17:13:54"} ,{ y:"0",x:"2018-04-18 17:20:55"} ,{ y:"0",x:"2018-04-18 17:27:59"} ,{ y:"0",x:"2018-04-18 17:35:01"} ,{ y:"0",x:"2018-04-18 17:42:03"} ,{ y:"0",x:"2018-04-18 17:49:06"} ,{ y:"0",x:"2018-04-18 17:56:08"} ,{ y:"0",x:"2018-04-18 18:03:11"} ,{ y:"0",x:"2018-04-18 18:10:12"} ,{ y:"0",x:"2018-04-18 18:17:16"} ,{ y:"0",x:"2018-04-18 18:24:18"} ,{ y:"0",x:"2018-04-18 18:31:20"} ,{ y:"0",x:"2018-04-18 18:38:23"} ,{ y:"0",x:"2018-04-18 18:45:25"} ,{ y:"0",x:"2018-04-18 18:52:28"} ,{ y:"0",x:"2018-04-18 18:59:32"} ,{ y:"0",x:"2018-04-18 19:06:34"} ,{ y:"0",x:"2018-04-18 19:13:37"} ,{ y:"0",x:"2018-04-18 19:20:40"} ,{ y:"0",x:"2018-04-18 19:27:43"} ,{ y:"0",x:"2018-04-18 19:34:46"} ,{ y:"0",x:"2018-04-18 19:41:49"} ,{ y:"0",x:"2018-04-18 19:48:53"} ,{ y:"0",x:"2018-04-18 19:55:57"} ,{ y:"0",x:"2018-04-18 20:02:59"} ,{ y:"0",x:"2018-04-18 20:10:02"} ,{ y:"0",x:"2018-04-18 20:17:04"} ,{ y:"0",x:"2018-04-18 20:24:06"} ,{ y:"0",x:"2018-04-18 20:31:08"} ,{ y:"0",x:"2018-04-18 20:38:11"} ,{ y:"0",x:"2018-04-18 20:45:13"} ,{ y:"0",x:"2018-04-18 20:52:15"} ,{ y:"0",x:"2018-04-18 20:59:16"} ,{ y:"0",x:"2018-04-18 21:06:19"} ,{ y:"0",x:"2018-04-18 21:13:21"} ,{ y:"0",x:"2018-04-18 21:20:27"} ,{ y:"0",x:"2018-04-18 21:27:29"} ,{ y:"0",x:"2018-04-18 21:34:32"} ,{ y:"0",x:"2018-04-18 21:41:35"} ,{ y:"0",x:"2018-04-18 21:48:36"} ,{ y:"0",x:"2018-04-18 21:55:38"} ,{ y:"0",x:"2018-04-18 22:02:41"} ,{ y:"0",x:"2018-04-18 22:09:44"} ,{ y:"0",x:"2018-04-18 22:16:47"} ,{ y:"0",x:"2018-04-18 22:23:51"} ,{ y:"0",x:"2018-04-18 22:30:53"} ,{ y:"0",x:"2018-04-18 22:37:57"} ,{ y:"0",x:"2018-04-18 22:45:01"} ,{ y:"0",x:"2018-04-18 22:52:05"} ,{ y:"0",x:"2018-04-18 22:59:08"} ,{ y:"0",x:"2018-04-18 23:06:12"} ,{ y:"0",x:"2018-04-18 23:13:15"} ,{ y:"0",x:"2018-04-18 23:20:17"} ,{ y:"0",x:"2018-04-18 23:27:19"} ,{ y:"0",x:"2018-04-18 23:34:21"} ,{ y:"0",x:"2018-04-18 23:41:25"} ,{ y:"0",x:"2018-04-18 23:48:27"} ,{ y:"0",x:"2018-04-18 23:55:30"} ,{ y:"0",x:"2018-04-19 00:02:33"} ,{ y:"0",x:"2018-04-19 00:09:38"} ,{ y:"0",x:"2018-04-19 00:16:40"} ,{ y:"0",x:"2018-04-19 00:23:43"} ,{ y:"0",x:"2018-04-19 00:30:47"} ,{ y:"0",x:"2018-04-19 00:37:50"} ,{ y:"0",x:"2018-04-19 00:44:52"} ,{ y:"0",x:"2018-04-19 00:51:54"} ,{ y:"0",x:"2018-04-19 00:58:56"} ,{ y:"0",x:"2018-04-19 01:05:59"} ], borderWidth: 3, hiddenLegend: true, fill: false, pointStyle:['',yourImage,'','','','','','','','','','',yourImage,'','','','','','','','','','','','','','','','','','','','','','',yourImage,'','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','',yourImage,'','','','','','',yourImage,'','','',yourImage,'','','','','','','','',yourImage,'',yourImage,'','','',yourImage,'','','',yourImage,'','',yourImage,'','','','','','','','','','','','',]} ,], yHighlightRange : { begin: 2, end: 8 } }; var config={ data: lineChartData, options: { annotation: { annotations: [{ type: 'line', mode: 'horizontal', scaleID: 'y-axis-0', value: 8, label: { content: "Ln2", enabled: true, position:'left', } , borderColor: 'rgba(231, 76, 60,1.0)', borderWidth: 3 } ,{ type: 'line', mode: 'horizontal', scaleID: 'y-axis-0', label: { content: "Lin1", enabled: true, position:'left', } , value: 2, borderColor: 'rgba(231, 76, 60,1.0)', borderWidth: 3 } ] } , responsive: true, elements: { point: { radius: 0, pointHitRadius: 1} } , hoverMode: 'index', stacked: false, tooltips: { mode: 'index', intersect: false } , scales: { xAxes: [{ type: 'time', time: { displayFormats: { 'millisecond': 'DD MMM', 'second': 'DD MMM', 'minute': 'DD MMM', 'hour': 'DD MMM', 'day': 'DD MMM', 'week': 'DD MMM', 'month': 'DD MMM', 'quarter': 'DD MMM', 'year': 'DD MMM', } , unitStepSize: 1, unit: 'day', } , gridLines : { display : false, } } ], yAxes: [{ display: true, scaleLabel: { show: true, labelString: "Value" } ,ticks: { suggestedMin:2 -5, suggestedMax:8 +5, } , } ] } } }; var randomColorFactor = function() { return Math.round(Math.random() * 255); }; var randomColor = function(opacity) { return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '1.0') + ')'; }; config.data.datasets.forEach(function(dataset) { var colr=randomColor(0.4); dataset.borderColor = colr; dataset.backgroundColor = colr; } ); window.myLine = Chart.Line(ctx,config); </script> </script> <a href="http://www.chartjs.org/samples/latest/charts/line/multi-axis.html">LINK </a> </body>

solution2
 0  2021-02-24 13:17:44

Noticed that Compatibility mode for IE 11 when turned on stops chart.js. Turned off compatibility mode and works.

暂无
暂无

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.

Related Question webpack 2 doesn't work on IE11? IE11 : Content-Type = false in IE11 it doesn't work Why doesn't firebase javascript authentication work with ie11? IE11 fullscreen doesn't work properly in Iframe Set custom style attribue doesn't work in IE11 Typescript for (let i of someArray) doesn't work in IE11 once:true with addEventListener doesn't work on IE11 or Edge Form submit in IE11 doesn't work correctly GET from IE11 to google doesn't work Date variable in local storage doesn't work in IE11
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM