我想推送实时数据并绘制

时间:2019-04-12 10:55:20

标签: vue.js browser real-time-data

我在浏览器中使用vue,代码对我来说似乎还不错,但出现错误,提示“未定义vue”。

这本身就是完整的代码。

<!DOCTYPE html>
<html lang="en">
<head>

</head>

<body>
<div class="app">
    {{ message }}
  <line-chart></line-chart>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://unpkg.com/vue-chartjs/dist/vue-chartjs.min.js"></script>
<script>
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'
  }
})
</script>

</body>

</html>

这是示例一,尽管我使用它来绘制实时数据。

1 个答案:

答案 0 :(得分:0)

在html文件中,只需在Vue中添加

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

它有效。