Загрузить ChartJS через VueJS - ChartJS пустое и 0px измерение

Question

Хорошо, поэтому я пытаюсь создать экземпляр ChartJS через VueJS, чтобы я мог легко обновлять его данные через запросы AJAX внутри компонента.

В основном он работает, экземпляр ChartJS создается, но он пуст и имеет высоту и ширину 0, и когда я изменяю его размер с помощью консоли, он по-прежнему пуст.

Итак, какой был бы лучший способ создания «компонента ChartJS» с VueJS или где ошибка в моем коде ниже?

---

Самый простой способ загрузки диаграммы - вот так.

<chart :resource="'https://httpbin.org/get'"></chart> 

Это основной компонент

var Vue = require('vue'); 

Vue.component('chart', { 
    template: require('./template.html'), 
    props: ['resource'], 
    data: function() { 
     return { 
      startingData: {}, 
      latestLabel: {}, 
     } 
    }, 
    ready: function() { 
     // here I would load the js data and set the startingData 
    }, 
}); 

Это директива, который я использую, чтобы передать данные из компонента. Я делаю это так, чтобы получить this.el так, что я могу получить контекст его

Vue.directive('loadData', function(value) { 
    var startingData = { 
      labels: [1, 2, 3, 4, 5, 6, 7], 
      datasets: [{ 
       fillColor: "rgba(151,187,205,0.2)", 
       strokeColor: "rgba(151,187,205,1)", 
       pointColor: "rgba(151,187,205,1)", 
       pointStrokeColor: "#fff", 
       data: [28, 48, 40, 19, 86, 27, 90] 
      }] 
     }, 
     latestLabel = startingData.labels[6]; 

    var liveChart = new Chart(this.el.getContext('2d')).Bar(startingData); 

    setInterval(function() { 
     liveChart.addData([Math.random() * 100], ++latestLabel); 
     liveChart.removeData(); 
    }, 1000); 
}); 

Это шаблон компонента

<canvas width="960" height="300" v-load-data="startingData"></canvas> 

Answer 1

Вы обеспокоены this issue. Ваш график не делает, потому что, как вы отметили, граф имеет высоту и ширину 0. я имел this problem при работе с tabsets, и я решил ее перерисовывать график с директивой как это:

app.directive('graphCanvasRefresh', ['$compile', function($compile) { 
function link(scope, elem, attrs) { 

function refreshDOM() { 
    var markup = '<canvas class="chart chart-pie" id="graph" data="entityGraph.data" labels="entityGraph.labels" legend="true" colours="graphColours" ></canvas>'; 
    var el = angular.element(markup); 
    compiled = $compile(el); 
    elem.html(''); 
    elem.append(el); 
    compiled(scope); 
}; 

// Refresh the DOM when the attribute value is changed 
scope.$watch(attrs.graphCanvasRefresh, function(value) { 
    refreshDOM(); 
}); 

// Clean the DOM on destroy 
scope.$on('$destroy', function() { 
    elem.html(''); 
}); 
}; 

    return { 
    link: link 
}; 
}]); 

Надеюсь, это может вам помочь