Svelte Sapper - 融合图答案

【问题标题】：Svelte Sapper - Fusion chartSvelte Sapper - 融合图
【发布时间】：2020-09-05 09:22:03
【问题描述】：

我正在尝试在 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

我是苗条/工兵的新手，所以我可能在某个地方犯了愚蠢的错误。
感谢您的帮助！

【问题讨论】：

为什么要在 onMount 函数中导入而不是在组件的顶部导入？

标签： svelte fusioncharts sapper

【解决方案1】：

当您尝试通过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 包并将其添加到全局窗口对象。这不是真正的正确svelte方式，但似乎是你启动和运行它的最佳机会。

【讨论】：