Question

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

最初没有视图正常工作，在ie10上打开开发工具后，我发现=>，let和myFunc(): ....之类的es6内容正在打破页面。

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

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

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

更新：

从API

获取数据的getQueueData函数

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调用是异步的。因此，您打开图表所在的页面，并在数据到达之前呈现图表。

您可以设置一个类似<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 = []; }); },之类的变量，只有在您的数据存档时才会渲染图表。

{{1}}

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

1 个答案: