如何使用来自 Svelte 中 API 端点的数据更新图表？

Question

我正在使用 Svelte JS Web 框架和 Chart.js 图表库来绘制条形图。我创建了一个 Skeleton 项目 并安装了

svelte-chartjs

和

chart.js

包：

npm install svelte-chartjs chart.js

在

routes

文件夹下，我制作了

generate/+server.js

端点来模拟API调用：

import { json } from '@sveltejs/kit';

function getRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

export function GET() {
  let randomNumbers = Array.from({ length: 12 }, () => getRandomNumber(10, 20));

  return json(randomNumbers);
}

它会生成 10 到 20 之间的 12 个随机整数。现在，我可以使用根页面上的

fetch('/generate')

函数调用此端点。

routes/+page.svelte

文件的内容如下：

<script>
  import { Bar } from 'svelte-chartjs';
  import { Chart, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js';

  Chart.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale);

  let fetchedData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

  let data = {
    labels: [
      'January',
      'February',
      'March',
      'April',
      'May',
      'June',
      'July',
      'August',
      'September',
      'October',
      'November',
      'December'
    ],
    datasets: [
      {
        label: 'Random Number',
        data: fetchedData,
        backgroundColor: 'rgba(98,  182, 239,0.4)',
        borderColor: 'rgba(98,  182, 239, 1)',
        borderWidth: 2
      }
    ]
  };

  let options = {
    responsive: true,
    maintainAspectRatio: false
  };

  async function generate() {
    const response = await fetch('/generate');
    fetchedData = await response.json();
  }
</script>

<h1>Fetch Data from API endpoint</h1>

<button on:click={generate}>Request</button>

<p>Current data: {fetchedData}</p>

<div>
  <Bar {data} {options} />
</div>

我已经用 1 到 12 个整数初始化了数据，单击 Request 按钮时会更改数据。因此，数据获取成功，但条形图未使用新生成的值进行更新。

Answer 1

要使用新生成的数据更新图表，您需要响应式声明

data

变量：

$: data = {
    labels: [
      'January',
      'February',
      'March',
      'April',
      'May',
      'June',
      'July',
      'August',
      'September',
      'October',
      'November',
      'December'
    ],
    datasets: [
      {
        label: 'Random Number',
        data: fetchedData,
        backgroundColor: 'rgba(98,  182, 239,0.4)',
        borderColor: 'rgba(98,  182, 239, 1)',
        borderWidth: 2
      }
    ]
  };

因为每当按钮组件改变数据状态时，都需要重新计算条形图的状态。它本质上意味着“只要任何引用值发生变化，就重新运行此代码”，在本例中为

datasets[0].data

值。有关更多信息，请访问反应性/声明教程。

在这里尝试完整的代码：REPL