文章/答案/技术大牛

发布

社区首页 >问答首页 >Svelte Sapper - Fusion图表

问Svelte Sapper - Fusion图表
EN

Stack Overflow用户

提问于 2020-09-05 17:22:04

回答 1查看 187关注 0票数 0

我正在尝试使用sapper中的FusionChart，但无法使用它。我遵循了这篇文档。

https://www.fusioncharts.com/dev/getting-started/sveltejs/your-first-chart-using-sveltejs

本文档是针对svelte的，因此对于sapper，我尝试了一些更改，并尝试动态导入库，但仍然不起作用。

  import { onMount } from "svelte";
  import SvelteFC from "svelte-fusioncharts";

  $: chartConfig = {};

  onMount(async () => {
    const FusionCharts = await import("fusioncharts");
    const Charts = await import("fusioncharts/fusioncharts.charts");
    const FusionTheme = await import(
      "fusioncharts/themes/fusioncharts.theme.fusion"
    );
    const { fcRoot } = await import("svelte-fusioncharts");
    fcRoot(FusionCharts, Charts, FusionTheme);

    const chartData = [
      { label: "Venezuela", value: "290" },
      { label: "Saudi", value: "260" },
      { label: "Canada", value: "180" },
      { label: "Iran", value: "140" },
      { label: "Russia", value: "115" },
      { label: "UAE", value: "100" },
      { label: "US", value: "30" },
      { label: "China", value: "30" }
    ];

    chartConfig = {
      type: "column2d", //Select the chart type
      width: 600, //Set the width of the chart
      height: 400, //Set the height of the chart
      dataFormat: "json", //Set the input dataFormat to json
      dataSource: {
        chart: {
          caption: "Countries With Most Oil Reserves [2017-18]", //Set the caption to your chart
          subCaption: "In MMbbl = One Million Barrels", //Set a sub-caption to your chart
          xAxisName: "Country", //Assign a relevant name to your x-axis
          yAxisName: "Reserves (MMbbl)", //Assign a relevant name to your y-axis
          numberSuffix: "K",
          theme: "fusion" //Apply a theme to your chart
        },
        //Include chartData from STEP 2
        data: chartData
      }
    };
  });

</script>

{#if process.browser}
  <SvelteFC {...chartConfig} />
{/if}

在浏览器上，我得到以下错误：

index.svelte:10 Uncaught (in promise) TypeError: m is not a function
    at index.svelte:10
    at Array.forEach (<anonymous>)
    at fcRoot (index.svelte:6)
    at Layout1.svelte:26

我是svelte/sapper的新手，所以我可能在某个地方犯了一个愚蠢的错误。

谢谢你的帮助！

fusioncharts

sapper

svelte

回答 1

Stack Overflow用户

发布于 2020-09-10 16:45:47

当您尝试通过const FusionCharts = await import("fusioncharts");直接导入FusionCharts包时，似乎出现了一些奇怪的错误。所有其他导入都可以。您可以采取一种变通办法。在您的template.html中，在<head>部分添加以下脚本：

<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>

然后使用以下代码初始化文件中的图表：

<script>
  import { onMount } from "svelte";

  onMount(() => {
    window.FusionCharts.ready(function () {
      // chart instance
      var chart = new FusionCharts({
        type: "column2d",
        renderAt: "chart-container", // container where chart will render
        width: "600",
        height: "400",
        dataFormat: "json",
        dataSource: {
          // chart configuration
          chart: {
            caption: "Countries With Most Oil Reserves [2017-18]",
            subcaption: "In MMbbl = One Million barrels",
          },
          // chart data
          data: [
            { label: "Venezuela", value: "290000" },
            { label: "Saudi", value: "260000" },
            { label: "Canada", value: "180000" },
            { label: "Iran", value: "140000" },
            { label: "Russia", value: "115000" },
            { label: "UAE", value: "100000" },
            { label: "US", value: "30000" },
            { label: "China", value: "30000" },
          ],
        },
      }).render();
    });
  });
</script>

<div id="chart-container" />

发生的情况是使用cdn而不是npm包，并将其添加到全局窗口对象。这并不是真正合适的方式，但似乎是你启动和运行它的最好机会。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63752352

复制

相似问题

问Svelte Sapper - Fusion图表
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Svelte Sapper - Fusion图表EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Svelte Sapper - Fusion图表
EN