如何使用 ApexCharts 将图表添加到 SolidJS 中

作者选择MOZILLA Foundation]接受捐赠，作为WRITE FOR ADENTIONS计划)的一部分。

简介

可视化数据为用户提供了一种直观的方式来了解他们的Web应用程序系统中正在发生的事情。ApexCharts是一个可用于通过SolidJS.)创建图表的包

SolidJS是一个用于构建用户界面的JavaScript库。由于SolidJS基于与React和Svelte，)等JAVASCRIPT库相同的设计，因此具有这些库经验的开发人员可以快速适应SolidJS。SolidJS立即将其模板编译为DOM，，在内部使用反应式编程而不是虚拟DOM更新DOM。SolidJS中的组件是常规的JavaScript函数，因此它们只呈现一次。SolidJS提供了当代的框架特性，包括并行渲染、JSX、片段、上下文、门户、悬念、流SSR和渐进式水合。Vite是主要的构建工具，它将您的应用程序打包为JAVASCRIPT以使其紧凑。

ApexCharts是一个开源的、可定制的JAVASCRIPT图表库，用于创建Web应用的交互可视化。您可以将ApexCharts与许多流行的JavaScript框架集成在一起，包括SolidJS。ApexCharts有一系列灵活且响应迅速的图表，可以跨多个屏幕呈现。

在本教程中，您将把ApexCharts集成到SolidJS应用程序中以实现数据可视化。您将开发一个应用程序，从OpenWeatherMap API中提取天气数据并将其显示在条形图中。

前提条件

要学习本教程，您需要具备以下条件：

第一步-创建SolidJS项目

在本步骤中，您将创建一个SolidJS项目并安装创建图表所需的所有依赖项。您将使用包含所需样板代码的Vite Template]创建一个SolidJS应用程序。

在新的终端会话中，创建并移动到本教程将使用的新目录：

1mkdir charts
2cd charts

在本教程中，该目录将命名为charts，但您可以随意命名。

然后，运行npx degit命令，将模板从仓库solid/js/templates/js克隆到您的项目文件夹中：

1npx degit solidjs/templates/js solid-chart

您可以将Solid-chart替换为您的应用程序的所需名称。

<$>[备注] 注意： TypeScrip是JavaScript的超集，提供可选的静态类型、类和接口。它还为JSX提供了增强的代码完成和智能感知。如果您喜欢使用TypeScrip，请运行以下命令：

1npx degit solidjs/templates/ts solid-chart

您将收到与/js模板相同的/ts模板输出。 <$>

您将收到以下输出：

1[secondary_label Output]
2> cloned solidjs/templates#HEAD to solid-chart

此输出确认模板已保存到您的计算机。将模板克隆到项目文件夹后，可以移到模板文件夹并安装项目的必要依赖项：

1cd solid-chart
2npm install

NPM将为该项目安装必要的依赖项。

在SolidJS中集成图表还需要两个依赖项：ApexCharts和Solid-ApexCharts.

ApexCharts是一个JavaScript图表库，用于为Web应用程序创建交互式可视化。ApexCharts支持14种图表，包括条形图、折线图、面积图、饼图、柱形图、方框图、烛台图、热图等。

Solid-ApexCharts是ApexCharts的SolidJS包装器，使您能够将ApexCharts元素用作SolidJS组件。

运行此命令以安装以下依赖项：

1npm install apexcharts solid-apexcharts

然后，使用以下命令启动开发服务器：

1npm run dev

您将收到类似以下内容的输出：

1[secondary_label Output]
2...
3  vite v2.9.15 dev server running at:
4
5  > Local: http://localhost:3000/
6  > Network: use `--host` to expose
7
8  ready in 605ms.

您的应用程序现在将在端口'3000'上运行。打开浏览器，输入URL http：//localhost：3000/，进入SolidJS启动页面：

SolidJS启动页面显示徽标和一些文本

<$>[注] 注意： 如果您是在远程服务器上学习教程，您可以使用端口转发在浏览器中测试应用。

在开发服务器仍在运行的情况下，在本地计算机上打开另一个终端并输入以下命令：

1ssh -L 3000:localhost:3000 your_non_root_user@your_server_ip

连接到服务器后，在本地计算机的Web浏览器上导航到http://localhost:3000。在本教程的其余部分中，保持第二个端子处于打开状态。 <$>

一旦安装了所有依赖项，就可以从API获取数据。

第二步-从API取数

在本步骤中，您将使用Fetch API从OpenWeatherMap.检索数据您将使用特定位置的纬度，并在图表中显示变化。

在您的首选编辑器中，打开src文件夹中的App.jsx文件。本教程使用命令行编辑器nan：

1nano src/App.jsx

<$>[备注] 注意： 如果您在第一步中使用的是类型脚本模板，则不会使用.jsx文件。相反，在整个教程中打开任何.jsx文件的.tsx文件。 <$>

在这里，您将从API检索数据并将其提供给另一个组件，以便它可以呈现图表。

首先，删除模板文件中自动生成的所有信息。

接下来，添加一行，从solid-js导入createEffect：

1[label src/App.jsx]
2import { createEffect } from "solid-js";

现在，您将在函数调用API的位置创建效果。将以下行添加到文件中：

 1[label src/App.jsx]
 2...
 3
 4createEffect(() => {
 5  const fetchData = async () => {
 6    const res = await fetch("http://api.openweathermap.org/geo/1.0/direct?q=London&limit=5&appid=2c36818bb5ca9e829313dd736fd15859");
 7    const data = await res.json();
 8  };
 9
10  fetchData()
11});

一个名为fetchData的异步函数使用Fetch接口查询OpenWeatherMap接口。此函数在App组件挂载后立即运行，因为fetchData在createEffect中被调用。OpenWeatherMap API通常返回一组天气对象。在这里，使用的是5‘的限制。从数据来看，只有name和lat是要使用的实体(在API调用中，查询是London，API key是appid=`标识的字符串)。

因为fetchData是一个fetchc函数，所以你需要await响应。响应在可用时存储在res变量中。一旦服务器接收到数据，响应将使用函数.json（)转换为JSON并存储在data变量中。

检索数据后，下一项任务是将其存储在信号中并将其导出。 从API检索数据后，您可以创建图表数据信号并使用空对象对其进行初始化。然后用API中的数据更新它的值。

仍然在src/App.jsx中，从solid-js导入sendSignal。为此，请通过添加突出显示的文本来更新初始导入：

1[label src/App.jsx]
2import { createSignal, createEffect } from "solid-js";
3...

然后，在IMPORT语句后面添加突出显示的文本，为图表数据创建一个Signal变量：

1[label App.jsx]
2import { createSignal, createEffect } from 'solid-js';
3
4const [chartData, setChartData] = createSignal({});
5...

在‘固体’中，‘信号’是反应性的基础。它们包含动态值，因此如果修改Signal的值，依赖它的所有内容都会自动更新。

初始值是用来创建Signal的参数，有两个函数的数组(a_Getter_和_setter_)是返回值。第一个返回值不是值本身，而是一个getter，一个返回当前值的函数。为了进行适当的更新，库需要跟踪该信号被读取的位置。在本教程中，chartData是getter，而setChartData是setter。Signal是用空对象初始化的。

ApexCharts要求您指定选项。在本教程中，您将指定带有)选项，以及添加)选项。

为此，您将使用map()方法构建从API返回的值数组。map()方法为每个数组元素调用一个函数，在新数组中返回结果。在fetchData异步函数中添加突出显示的行：

 1[label App.jsx]
 2...
 3createEffect(() => {
 4  const fetchData = async () => {
 5    const res = await fetch("http://api.openweathermap.org/geo/1.0/direct?q=London&limit=5&appid=2c36818bb5ca9e829313dd736fd15859");
 6    const data = await res.json();
 7
 8    setChartData({
 9      series: [
10        {
11          name: 'Latitudes in London',
12          data: data.map((d) => (d.lat))
13        }
14      ],
15      xaxis: {
16        categories: data.map((d) => (d.name))
17      }
18    });
19  };
20
21  fetchData()
22});

在setter函数setChartData中，您可以为Apexcharts的series和xaxis指定值。

在)遍历从服务器返回的data，并传递由lat`表示的纬度值。这些将是每个图表中的值。

xaxis对象需要categories属性，该属性通过使用map（)方法迭代data并传递name的值来设置。此值表示每个图表上的城市名称。

使用API中的图表参数和数据更新chartData后，需要提供样式并导出。将突出显示的行添加到文件中：

 1[label App.jsx]
 2import { createSignal, createEffect } from "solid-js";
 3import styles from './App.module.css';
 4
 5const [chartData, setChartData] = createSignal({});
 6
 7createEffect(() => {
 8  const fetchData = async () => {
 9    const res = await fetch("http://api.openweathermap.org/geo/1.0/direct?q=London&limit=5&appid=2c36818bb5ca9e829313dd736fd15859")
10    const data = await res.json();
11
12    setChartData({
13      series: [
14        {
15          name: 'Latitudes in London',
16          data: data.map((d) => (d.lat))
17        }
18      ],
19      xaxis: {
20        categories: data.map((d) => (d.name))
21      }
22    });
23
24  }
25
26  fetchData()
27});
28
29function App() {
30
31  return (
32
33        <div class={styles.App}>
34          <h2>Using ApexCharts.js to create charts in SolidJS</h2>
35          <h3>Bar Chart</h3>
36        </div>
37
38  );
39}
40
41export { chartData }
42
43export default App;

首先，导入style以在Return部分使用。

然后，定义函数App()的返回，该函数将在您运行应用程序时为图表创建标题。它调用style来创建两个Header。

来自SolidJS的信号可以被任何其他组件导出和使用，因此您还可以在文件末尾导出chartData。

保存并关闭该文件。

由于信号已导出，您现在可以创建一个图表组件来使用和显示它。

第三步-使用接口数据创建图表

在此阶段，您将创建一个图表组件并使用API中的数据来显示图表。

在src文件夹中，创建一个Components文件夹：

1mkdir src/components

然后添加新的Charts.jsx文件：

1nano src/components/Charts.jsx

在新的Charts.jsx文件中，导入SolidApexCharts和chartData：

1[label src/components/Charts.jsx]
2import { SolidApexCharts } from 'solid-apexcharts';
3import { chartData } from '../App';

现在添加以下行以创建一个Charts函数：

1[label src/components/Charts.jsx]
2function Charts() {
3
4  return (
5    <SolidApexCharts width="1200" type="bar" options={chartData()}  />
6  );
7};
8
9export default Charts;

Charts函数将使用前面设置的chartData变量中的信息来创建一个1200像素宽的bar图表。传入chartData作为options的值，并在SolidApexCharts组件中设置图表的宽度和类型。

保存并关闭该文件。

打开src/App.jsx文件：

1nano src/App.jsx

现在将Charts组件导入到App.jsx文件中：

 1[label App.jsx]
 2import { createSignal, createEffect } from "solid-js";
 3import styles from './App.module.css';
 4import Charts from './components/Charts';
 5
 6const [chartData, setChartData] = createSignal({});
 7
 8function App() {
 9
10  return (
11    <div class={styles.App}>
12      <h2>Using ApexCharts.js to create charts in SolidJS</h2>
13      <h3>Bar Chart</h3>
14      <Charts />
15    </div>
16  );
17};
18
19export { chartData }
20
21export default App;

首先，您导入Charts。然后，将<Charts/>组件添加到h3元素的正下方，以在应用程序运行时呈现。这条线将显示带有动态数据的条形图。

保存并关闭该文件。

当您在浏览器中刷新应用程序时，条形图将呈现。

显示标题文本和带有动态data

您还可以在DigitalOcean社区repository.]中查看本教程中创建的文件

结论

在本文中，您构建了一个从API获取数据以创建图表的SolidJS应用程序。您在SolidJS应用程序中使用了ApexChart和Solid-ApexCharts进行数据可视化。现在，您可以使用动态数据制作其他类型的图表。尝试将图表从条形图调整为ApexCharts支持的另一种图表类型。

要了解有关SolidJS及其功能的更多信息，请访问SolidJS文档。要了解有关ApexCharts和其他可用配置的更多信息，请查看ApexCharts文档。

Published At
Categories with 技术
Tagged with
comments powered by Disqus