javascript - 为什么 ChartJs 不能在 IE 中运行

Question

本示例中的 VueJs 图表应用程序无法在 IE 中运行。有谁知道为什么吗？

例如下面的组件不打印错误但不同时运行

<div class="app">
    {{ message }}
  <line-chart></line-chart>
</div>


  Vue.component('line-chart', {
  extends: VueChartJs.Line,
  mounted () {
    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          label: 'Data One',
          backgroundColor: '#f87979',
          data: [40, 39, 10, 40, 39, 80, 40]
        }
      ]
    }, {responsive: true, maintainAspectRatio: false})
  }

})

var vm = new Vue({
  el: '.app',
  data: {
    message: 'Hello World'
  }
})

Answer 1

这是因为，在您的组件中使用一种 ES6 语法来定义对象方法，在这一行:

mounted () {

... Internet Explorer 尚不支持 ES6 语法。

相反，如果您希望支持 IE，则必须在整个组件/应用程序中使用 ES5 语法:

Vue.component('line-chart', {
   extends: VueChartJs.Line,
   mounted: function() {  //<- use this instead
      this.renderChart({
         labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
         datasets: [{
            label: 'Data One',
            backgroundColor: '#f87979',
            data: [40, 39, 10, 40, 39, 80, 40]
         }]
      }, {
         responsive: true,
         maintainAspectRatio: false
      })
   }
});

查看working example .