Estoy tratando de crear una gráfica con Google Charts, con la librería de Vue, pero no sé como hacer añadirla al div.
Esto es lo que he intentado hasta ahora, así es como se añade en vainilla (ejemplo aquí), pero lo intenté adaptar a Vue:
google.charts.load('current', {'packages': ['corechart']});
Vue.component('line-char', {
data: function(){
// Create the data table.
var data = google.visualization.arrayToDataTable([
['Tiempo', 'Temperatura'],
[1, 1000],
[2, 1170],
[3, 660],
[4, 1030]
]);
// Set chart options
var options = {
'title': 'Data Line',
'width': '100%',
'height': 250,
legend: { position: 'bottom' }
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
},
template: '<div v-model="chart_div"></div>'
});
html:
<div id="component">
<line-chart></line-chart>
</div>
data
, pero en la versión más reciente esdata: function() { return { data: value } }