Пример FusionCharts с шаблоном

Question

Кто-нибудь знает, как использовать Vue FusionCharts с «шаблоном»?

Я создал тест VueJs Компонент с именем FChart:

<template>
  <fusioncharts
    :type="type"
    :width="width"
    :height="height"
    :dataFormat="dataFormat"
    :dataSource="dataSource"
  ></fusioncharts>
</template>

<script>
import Vue from "vue";
import VueFusionCharts from "vue-fusioncharts";
import FusionCharts from "fusioncharts";
import TimeSeries from "fusioncharts/fusioncharts.timeseries";

// register VueFusionCharts component
Vue.use(VueFusionCharts, FusionCharts, TimeSeries);

var jsonify = res => res.json();
var dataFetch = fetch("https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/line-chart-with-time-axis-data.json").then(jsonify);
var schemaFetch = fetch("https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/line-chart-with-time-axis-schema.json").then(jsonify);

export default {
  name: "FChart",
  data() {
    return {
      width: "100%",
      height: "400",
      type: "timeseries",
      dataFormat: "json",
      dataSource: {
        chart: {},
        caption: {
          text: "Sales Analysis"
        },
        subcaption: {
          text: "Grocery"
        },
        yaxis: [
          {
            plot: {
              value: "Grocery Sales Value"
            },
            format: {
              prefix: "$"
            },
            title: "Sale Value"
          }
        ]
      }
    };
  },
  mounted: function() {
    Promise.all([dataFetch, schemaFetch]).then(res => {
      const data = res[0];
      const schema = res[1];
      const fusionTable = new FusionCharts.DataStore().createDataTable(
        data,
        schema
      );
      this.dataSource.data = fusionTable;
    });
  }
};
</script>

И мое приложение. vue выполняет следующее:

<template>
  <v-app>
    <v-content>
      <FChart />
    </v-content>
  </v-app>
</template>

<script>
import FChart from "./components/FChart";

export default {
  name: "App",
  components: { FChart }
};
</script>

, но это не работает. У меня в консоли появляется сообщение об ошибке:

Uncaught TypeError: Cannot read property 'getLogicalSpace' of undefined
    at e.i.manageSpace (fusioncharts.timeseries.js?79dd:1)
    at e.t.updateVisual (fusioncharts.js?8f68:13)
    at Object.e.__drawJob [as job] (fusioncharts.js?8f68:13)
    at b (fusioncharts.js?8f68:13)

I

Answer 1

После нескольких часов исследований и попыток, вот версия, которая на самом деле не отличается от первоначальной:

<template>
  <fusioncharts
    :type="type"
    :width="width"
    :height="height"
    :dataFormat="dataFormat"
    :dataSource="dataSource"
  ></fusioncharts>
</template>

<script>
import Vue from "vue";
import VueFusionCharts from "vue-fusioncharts";
import FusionCharts from "fusioncharts";
import TimeSeries from "fusioncharts/fusioncharts.timeseries";

Vue.use(VueFusionCharts, FusionCharts, TimeSeries);

const jsonify = res => res.json();
const dataFetch = fetch(
  "https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/line-chart-with-time-axis-data.json"
).then(jsonify);
const schemaFetch = fetch(
  "https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/line-chart-with-time-axis-schema.json"
).then(jsonify);

export default {
  name: "FChart",
  data() {
    return {
      type: "timeseries",
      width: "100%",
      height: "500",
      dataFormat: "json",
      dataSource: {
        data: null,
        caption: {
          text: "Sales Analysis"
        },
        subcaption: {
          text: "Grocery"
        },
        yAxis: [
          {
            plot: {
              value: "Grocery Sales Value",
              type: "line"
            },
            format: {
              prefix: "$"
            },
            title: "Sale Value"
          }
        ]
      }
    };
  }, 
  mounted: function() {
    // In this Promise we will create our DataStore and using that we will create a custom DataTable which takes two
    // parameters, one is data another is schema.
    Promise.all([dataFetch, schemaFetch]).then(res => {
      const data = res[0];
      const schema = res[1];
      // First we are creating a DataStore
      const fusionDataStore = new FusionCharts.DataStore();
      // After that we are creating a DataTable by passing our data and schema as arguments
      const fusionTable = fusionDataStore.createDataTable(data, schema);
      // After that we simply mutated our timeseries datasource by attaching the above
      // DataTable into its data property.
      this.dataSource.data = fusionTable;
    });
  }
};
</script>