带有模板的FusionCharts示例

Question

是否有人知道如何在“模板”中使用Vue FusionCharts？

我创建了一个名为FChart的测试VueJs组件：

<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>

我的App.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>

但这行不通。我在控制台上有一条错误消息，上面写着：

未定义的TypeError:无法读取未定义的属性'getLogicalSpace‘在e.t.updateVisual (fusioncharts.timeseries.js?79dd:1) at e.t.updateVisual (fusioncharts.js?8f68:13) at Object.e.__drawJob 作为工作 at b (fusioncharts.js?8f68:13)

我

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>