面试题：Svelte组件如何集成第三方图表库

安装Chart.js库
- 使用npm或yarn进行安装。
- 如果使用npm：
```
npm install chart.js
```
- 如果使用yarn：
```
yarn add chart.js
```
引入库到Svelte组件
- 在Svelte组件的<script>标签内引入Chart.js。
- 例如：
```
<script>
  import { onMount } from'svelte';
  import Chart from 'chart.js/auto';
</script>
```
- 这里使用chart.js/auto是因为它会自动注册所有的图表类型和插件，方便使用。

在组件中初始化图表

创建一个HTML元素作为图表的容器，例如一个<canvas>元素。
在onMount生命周期函数内初始化图表。
示例代码如下：

<script>
  import { onMount } from'svelte';
  import Chart from 'chart.js/auto';

  let chart;
  const data = {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }]
  };

  const options = {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  };

  onMount(() => {
    const ctx = document.getElementById('myChart').getContext('2d');
    chart = new Chart(ctx, {
      type: 'bar',
      data,
      options
    });
  });
</script>

<canvas id="myChart"></canvas>

在组件中更新图表

可以通过修改data对象中的数据来更新图表。
例如，假设我们有一个按钮，点击按钮来更新数据：

<script>
  import { onMount } from'svelte';
  import Chart from 'chart.js/auto';

  let chart;
  let data = {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }]
  };

  const options = {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  };

  onMount(() => {
    const ctx = document.getElementById('myChart').getContext('2d');
    chart = new Chart(ctx, {
      type: 'bar',
      data,
      options
    });
  });

  const updateData = () => {
    data.datasets[0].data = [5, 10, 15, 20, 25, 30];
    chart.update();
  };
</script>

<canvas id="myChart"></canvas>
<button on:click={updateData}>Update Chart</button>

这里点击按钮时，修改了data中的数据，然后调用chart.update()方法来更新图表显示。

面试题：Svelte组件如何集成第三方图表库

知识考点

面试题答案