如何提取具有反应属性的 Chart.js 图表作为 Svelte 中的单独组件？

Question

我使用 npm create svelte@latest myapp 命令创建了一个

Skeleton Project

。接下来，我使用

npm install svelte-chartjs chart.js

安装了 Chart.js 并创建了一个简单的条形图：

<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 numbers = [10, 20, 30];
  let dates = ['1/1/2024', '1/2/2024', '1/3/2024'];

  $: data = {
    labels: dates,
    datasets: [
      {
        label: 'Random Number',
        data: numbers,
        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');
    let fetchedData = await response.json();

    dates = fetchedData.dates;
    numbers = fetchedData.numbers;
  }
</script>

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

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

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

它从

/generate

API 端点获取数据，该端点生成 1 到 10 个随机数，值范围为 10 到 30。此外，日期是根据随机数的长度生成的。如果按下 Request 按钮，条形图将更新其标签和数据值。输出如下所示：

更新

routes/generate/+server.js

和

numbers

数组的

dates

文件（模拟 API 端点）的内容如下：

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

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

function generateDates(numDates) {
  var today = new Date();
  var dates = []
  
  for (let i = 0; i < numDates; i++) {
    let dateString = today.toLocaleDateString('en-US');
    dates.push(dateString);
    today.setDate(today.getDate() + 1);
  }

  return dates;
}

export function GET() {
  let length = getRandomNumber(1, 10);
  let numberData = Array.from({ length: length }, () => getRandomNumber(10, 30));
  let dateData = generateDates(length);
  
  return json({dates: dateData, numbers: numberData});
}

从端点开始的数据长度在1到10之间随机选择，起始日期从当前日期开始。 API 端点的输出示例：

{"日期":["2/8/2024","2/9/2024","2/10/2024"],"数字":[14,23,23]}

我想将

Bar

图表特定代码提取到单独的组件中，以提高可读性和可重用性。但是，在获取（生成）新数据时，

labels

和

datasets[0].data

属性会发生反应性变化。

如何将具有反应属性的 Chart.js 图表提取为单独的组件？

Answer 1

创建一个组件（例如

BarChart.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);

  export let dates = [];
  export let numbers = [];

  $: data = {
    labels: dates,
    datasets: [
      {
        label: 'Random Number',
        data: numbers,
        backgroundColor: 'rgba(98,  182, 239,0.4)',
        borderColor: 'rgba(98,  182, 239, 1)',
        borderWidth: 2
      }
    ]
  };

  let options = {
    responsive: true,
    maintainAspectRatio: false
  };
</script>

<Bar {data} {options} />

您需要导出

dates

和

numbers

变量，以便可以从另一个组件更新它们。将新组件导入到原始组件中，并使用条形图的属性分配获取的值：

<script>
  import BarChart from './BarChart.svelte';

  let numbers = [10, 20, 30];
  let dates = ['1/1/2024', '1/2/2024', '1/3/2024'];

  async function generate() {
    const response = await fetch('/generate');
    let data = await response.json();

    dates = data.dates;
    numbers = data.numbers;
  }
</script>

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

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

<div>
  <BarChart {dates} {numbers} />
</div>

注意：

BarChart.svelte

组件是在获取组件旁边创建的。以后如果有多个组件，建议创建一个

components

文件夹。