0

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

最初没有视图工作，在 ie10 上打开开发工具后，我看到 es6 的东西像=>，let并且myFunc(): ....正在破坏页面。

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

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

 <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 = [];
            });
        },
4

1 回答 1

0

好吧，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 = [];
            });
        },
于 2017-10-12T08:39:35.507 回答