Svelte Sapper-融合图表

问题描述

我正在尝试在sapper中使用FusionChart，但无法使用它。我遵循此文档。
https://www.fusioncharts.com/dev/getting-started/sveltejs/your-first-chart-using-sveltejs

该文档是精简版，因此对于精打细算的人，我尝试了一些更改并尝试动态导入库，但是仍然无法正常工作。

  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的新手，所以可能是我在某个地方犯了愚蠢的错误。
感谢您的帮助！

解决方法

当您尝试通过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",],}).render();
    });
  });
</script>

<div id="chart-container" />

发生的事情是，您使用CDN而不是npm软件包并将其添加到全局窗口对象。这不是真正的 svelte 方法，但似乎是您最好的机会来启动和运行它。

sapper svelte