为什么我的 Vue-ChartJS 图表数据没有显示在 ie10 上？

Question

我正在使用来自 vue 和 vue-chartjs 的预打包脚本文件，并将它们添加到页面中。

最初没有视图工作，在 ie10 上打开开发工具后，我看到像 =>、let 和 myFunc(): .... 这样的 es6 内容正在破坏页面。

所以我删除了这个，现在图表的轮廓和布局显示，轴的比例甚至在获取新数据时发生变化。但是，图表中实际上并没有显示任何内容。

我怀疑是这个新的html标签，ie无法识别：

 <line-chart
  :data="myData"
  :options="{responsive: false, maintainAspectRatio: false}"
  :width="400"
  :height="200"
  >
 </line-chart>

更新：

getQueueData 函数从 API 获取数据

getQueueData: function() {
            var selectedBranch = this.selectedBranch;
            var selectedDay = this.selectedDay;
            var vm = this;
            this.$http.get('/api/v1/branches/' + selectedBranch + '/queues/' + selectedDay + '/').then(function(response) {
                vm.queueData = response.body;
                vm.fillData();
            }, function(response) {
                alert('Whoops! Something went wrong.')
                vm.queueData = [];
            });
        },

Answer 1

chartjs 和 vue 和 vue-chartjs 在 IE10 中运行良好。 这取决于您的工作流程和管道。应该转译 Javascript。而且不是新的html标签，是vue.js的自定义元素。

但是我猜你的问题更多是 API 调用。因为 api 调用是异步的。因此，您打开图表所在的页面，图表会在数据到达之前呈现。

您可以设置像loaded 之类的变量，并且仅在您的数据到达时才呈现图表。

<line-chart
  v-if="loaded"
  :data="myData"
  :options="{responsive: false, maintainAspectRatio: false}"
  :width="400"
  :height="200"
  >
 </line-chart>



getQueueData: function() {
            var selectedBranch = this.selectedBranch;
            var selectedDay = this.selectedDay;
            var vm = this;
            this.$http.get('/api/v1/branches/' + selectedBranch + '/queues/' + selectedDay + '/').then(function(response) {
                vm.queueData = response.body;
                vm.fillData();
                vm.loaded = true
            }, function(response) {
                alert('Whoops! Something went wrong.')
                vm.queueData = [];
            });
        },