Использование DataViews с vue-google-charts - PullRequest
Новая
       27

Использование DataViews с vue-google-charts

0 голосов
/ 29 апреля 2019

Как мне использовать DataView в vue-google-charts ?

Пожалуйста, посмотрите на мой пример кода и коробки здесь . Я использую DataView (в этом примере просто для постоянного отображения значений в столбцах).

В конце метода createDataTable в App.vue Я использую стандартный метод библиотеки Google draw: 

chart.draw(view, this.Options);

, чтобы заставить это работать. Но на пути к потере «функции перерисовки диаграммы, если окно изменяет размеры», которая встроена прямо под капот с помощью vue-google-charts и, конечно, также реактивной привязки данных, с this.chartData = data;

Я бы предпочел остаться в пределах vue-google-charts и использовать стандартное назначение this.chartData, например: 

this.chartData = data;

Но тогда, конечно, DataView игнорируется. Может быть, это запрос функции. Было бы здорово иметь другую конфигурационную опцию для Ghart-Tag рядом с 

:options ="chartOptions"

как 

:view="chartView"

Или кто-то может предложить мне решение, которое останется в vue-google-charts и сделает DataViews как в примере?

Ниже кода App.vue с упомянутым методом, но опять же , вот целый пример для кодов и box . 

<template>
  <div id="app">
    <GChart
      type="ColumnChart"
      :data="chartData"
      :options="chartOptions"
      @ready="onChartReady"
      ref="gChart"
    />    
  </div>
</template>

<script>
import { GChart } from "vue-google-charts";
export default {
  name: "App",
  components: {
    GChart
  },
  data() {
    return {
      chartData: null, // the chartData will be created once Chart is ready (needs google charts lib for this) 
      chartOptions: {
        title: 'Line intervals, default',
      }
    };
  },

  methods: {
    onChartReady (chart, google) {
      // now we have google lib loaded. Let's create data table based using it.
      this.createDataTable(chart,google);

    },
    createDataTable(chart,google) {
      var data = google.visualization.arrayToDataTable([
          ["Element", "Density" ],
          ["Copper", 8.94],
          ["Silver", 10.49],
          ["Gold", 19.30],
          ["Platinum", 21.45]
        ]);

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
          { calc: "stringify",
            sourceColumn: 1,
            type: "string",
            role: "annotation" }
      ]);

      //this.chartData = data;
      chart.draw(view, this.Options);

    }
  }
};
</script>
...