無法使用Vue.js獲取c3圖表來渲染

main.js

var Vue = require('vue'); 
var c3 = require('c3'); 
new Vue({ 
    template: '<div id="puppa"></div>', 
    mounted: function() { 
     c3.generate({ 
      bindto: '#puppa', 
      data: { 
       type: 'area', 
       x: 'x', 
       xFormat: '%H:%M', 
      columns:[ 
       ['x',"12:38","12:38","12:38","12:38","12:39","12:39","12:39","12:39","12:40","12:40","12:40","12:41","12:41","12:41","12:41","12:42","12:42","12:42","12:42","12:43","12:43","12:43","12:43","12:44","12:44"], 
       ['write', 14709198848,14709313536,14709522432,14709633024,14710034432,14710157312,14710341632,14710583296,14710788096,14710931456,14711058432,14711291904,14711508992,14711668736,14711771136,14712008704,14712107008,14712381440,14712586240,14712795136,14712963072,14713077760,14713331712,14713565184,14713729024], 
       ['read', 3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080] 
      ] 
      }, 
      axis: { 
       x: { 
        type: 'timeseries', 
        tick: { 
         format: function (x) { 
          if (x.getDate() === 1) { 
           return x.toLocaleDateString(); 
          } 
         } 
        } 
       } 
      } 
     }); 
    } 
});

來源

2017-04-26 KingKongFrog

沒有運氣。 c3將如何知道該聲明的元素？ – KingKongFrog

我認爲這是因爲你從來沒有真正掛載過某些東西。添加一個'el：<頁面上的某個div>'。 – Bert

在你的HTML。

<div id="app"></div>

或其他任何你想使用的ID。你需要給你的Vue一個元素來渲染它的模板。在你的Vue

new Vue({ 
    el: "#app", 
    mounted: function() { 
    c3.generate({ 
     bindto: this.$el, 
     ... 
    }) 
    } 
})

這是example。

也跑過需要downgrade the d3 version與c3。

來源

2017-04-26 23:42:43 Bert

也許這是問題的一部分。我得到了[Vue warn]：找不到元素：＃app' – KingKongFrog

@KingKongFrog是的，您需要在HTML中使用該ID。 Vue需要掛載到某個元素。 – Bert

對。但是因爲我設置了'template：'

''我不確定爲什麼我會得到這個錯誤。 – KingKongFrog

無法使用Vue.js獲取c3圖表來渲染

回答

相關問題