SolidJS图表集成：使用ApexCharts轻松实现数据可视化

2 年 ago

宇, 华

3 minutes

这是文章《如何在SolidJS中使用ApexCharts添加图表》的第1部分（共6部分）。

作者选择将Mozilla基金会作为“为捐赠而写作”计划的受捐方。

引言

通过可视化数据，用户可以直观地了解其Web应用程序系统中正在发生的事情。ApexCharts是一个可以与SolidJS一起使用的工具包，用于创建图表。

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

ApexCharts是一个开源的JavaScript图表库，可用于创建交互式可视化图表的网络应用程序。您可以将ApexCharts与包括SolidJS在内的许多流行的JavaScript框架集成。ApexCharts拥有广泛的灵活响应式图表，可以在多个屏幕上渲染。

在本教程中，您将在SolidJS应用程序中集成ApexCharts以进行数据可视化。您将开发一个应用程序，从OpenWeatherMap API获取天气数据，并在条形图中显示它。

先决条件

要按照本教程进行操作，您需要准备以下物品：

您的机器上已安装Node.js，您可以按照如何安装Node.js教程进行设置。
一个Web浏览器，如Firefox或Chrome。
（可选）SolidJS库的基础知识。您可以查阅SolidJS文档。
（可选）一个支持JavaScript语法高亮的文本编辑器，例如Visual Studio Code或Atom。本教程使用命令行编辑器nano。

第一步 — 创建SolidJS项目

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

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

mkdir charts
cd charts

对于本教程，目录将被命名为charts，但您可以自由选择给它取任何名字。

然后，在项目文件夹中运行npx degit命令来从solidjs/templates/js仓库中克隆模板。

npx degit solidjs/templates/js solid-chart

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

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

npx degit solidjs/templates/ts solid-chart

对于/ts模板和/js模板，您将获得相同的输出结果。您将收到以下结果。

Output

> cloned solidjs/templates#HEAD to solid-chart

此输出证实模板已保存到您的计算机上。一旦将模板克隆到您的项目文件夹中，您可以移动到模板文件夹并安装项目所需的依赖项。

cd solid-chart
npm install

NPM会安装项目所需的依赖项。

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

ApexCharts是一个用于创建互动可视化的JavaScript图表库，适用于网页应用。ApexCharts支持十四种图表类型，包括柱状图、折线图、面积图、饼图、列图、箱线图、蜡烛图、热力图等等。

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

运行这个命令来安装这些依赖项。

npm install apexcharts solid-apexcharts

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

npm run dev

您将会收到类似于这个的输出。

Output

... vite v2.9.15 dev server running at: > Local: http://localhost:3000/ > Network: use `--host` to expose ready in 605ms.

您的应用现在将在3000端口上运行。打开浏览器，输入URL http://localhost:3000/ 访问SolidJS的启动页面。

注意：如果您正在远程服务器上进行教程，您可以使用端口转发在浏览器中测试应用程序。

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

ssh -L 3000:localhost:3000 您的非根用户@您的服务器IP

连接到服务器后，在您本地计算机的Web浏览器中导航到http://localhost:3000。在本教程的剩余部分保持第二个终端打开。一旦您安装完所有的依赖项，您就可以从API获取数据。

第二步 — 从API获取数据

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

在您喜欢的编辑器中，打开src文件夹中的App.jsx文件。本教程使用命令行编辑器nano。

nano src/App.jsx

注意：如果您在步骤1中使用了TypeScript模板，则不会使用.jsx文件。相反，打开该教程中的任何.jsx文件时，请使用.tsx文件。

这是文章《如何在SolidJS中使用ApexCharts添加图表》的第2部分（共6部分）。

在这里，您将从API获取数据，并将其传递给另一个组件，以便渲染图表。

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

接下来，通过添加以下代码行从solid-js导入createEffect：

import { createEffect } from "solid-js";

现在，您将创建一个函数来调用API。在文件中添加这些行：

...

createEffect(() => {
  const fetchData = async () => {
    const res = await fetch("http://api.openweathermap.org/geo/1.0/direct?q=London&limit=5&appid=2c36818bb5ca9e829313dd736fd15859");
    const data = await res.json();
  };

  fetchData()
});

一个名为fetchData的异步函数使用Fetch API查询OpenWeatherMap API。该函数在App组件挂载时立即运行，因为fetchData在一个createEffect中被调用。OpenWeatherMap API通常返回一个天气对象的数组。在这里，使用了一个限制为5的结果集。从数据中，只使用名称和纬度（在API调用中，查询为London，API密钥由appid=标识的字符串）。

由于fetchData是一个异步函数，所以你需要等待响应。当可用时，响应被存储在res变量中。一旦服务器接收到数据，响应将使用函数.json()转换为JSON格式，并存储在data变量中。

在从API中获取数据之后，下一个任务是将数据存储在一个信号中并导出它。

从API中获取数据后，您可以创建图表数据的信号，并使用空对象对其进行初始化。然后使用API中的数据更新其值。

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

import { createSignal,  createEffect } from "solid-js";
...

然后，在导入语句后面通过添加突出显示的文本来创建一个用于图表数据的Signal变量。

import { createSignal, createEffect } from 'solid-js';

const [chartData, setChartData] = createSignal({});
...

在Solid中，信号是反应性的基础。它们包含动态值，因此如果你修改信号的值，依赖于它的一切都会自动更新。

初始值是用于创建信号的参数，并返回一个包含两个函数（一个是getter，一个是setter）的数组。第一个返回值不是值本身，而是一个getter，它是一个返回当前值的函数。为了适当地进行更新，库需要追踪信号的读取位置。在本教程中，chartData是getter，而setChartData是setter。该信号以一个空对象进行初始化。

在使用ApexCharts时，你需要指定选项。在本教程中，你将使用数据数组来指定系列选项，以及使用数据数组和类别数组来添加x轴选项。

为了完成这个任务，你需要使用map()方法构建从API返回的值的数组。map()方法会对每个数组元素调用一个函数，并将结果返回到一个新数组中。在fetchData异步函数内，加入以下高亮行：

...

...
createEffect(() => {
  const fetchData = async () => {
    const res = await fetch("http://api.openweathermap.org/geo/1.0/direct?q=London&limit=5&appid=2c36818bb5ca9e829313dd736fd15859");
    const data = await res.json();
    
    setChartData({
      series: [
        {
          name: '伦敦的纬度',
          data: data.map((d) => (d.lat))
        }
      ],
      xaxis: {
        categories: data.map((d) => (d.name))
      }
    });
  };

  fetchData()
});

在 setChartData 函数内部，您为 ApexCharts 的系列（series）和 X 轴（xaxis）指定了值。

在系列数组中，您为 name 属性和 data 属性指定了一个值。您使用 map() 函数迭代服务器返回的数据，并传递由 lat 表示的纬度值。这些将是图表中的每个数据点。

X 轴对象需要 categories 属性，该属性通过使用 map() 方法迭代数据并传递 name 值来设置。这个值表示图表上每个城市的名称。

一旦您通过 API 更新了 chartData 的图表参数和数据，您需要提供样式并将其导出。请将以下划线部分添加到文件中：

App.jsx

import { createSignal, createEffect } from "solid-js";
import styles from './App.module.css';

const [chartData, setChartData] = createSignal({});

createEffect(() => {
  const fetchData = async () => {
    const res = await fetch("http://api.openweathermap.org/geo/1.0/direct?q=London&limit=5&appid=2c36818bb5ca9e829313dd736fd15859")
    const data = await res.json();

    setChartData({
      series: [
        {
          name: 'Latitudes in London',
          data: data.map((d) => (d.lat))
        }
      ],
      xaxis: {
        categories: data.map((d) => (d.name))
      }
    });

  }

  fetchData()
});

function App() {

  return (
    <> 
        <div class={styles.App}>
          <h2>使用 ApexCharts.js 在 SolidJS 中创建图表</h2>
          <h3>柱状图</h3>
        </div>
    </>
  );
}

export { chartData }

export default App;

这是文章《如何使用ApexCharts在SolidJS中添加图表》的第4部分（共6部分）。

首先，在返回部分导入样式以供使用。

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

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

保存并关闭文件。

由于信号已经导出，您现在可以创建一个图表组件来消费和展示它。

第三步 – 使用API中的数据创建图表

这是文章《如何在SolidJS中使用ApexCharts添加图表》的第5部分（共6部分）。

在此阶段，您将创建一个图表组件，并从API获取数据以显示图表。

在源代码文件夹中创建一个名为components的文件夹。

mkdir src/components

然后添加一个新的Charts.jsx文件。

nano src/components/Charts.jsx

在新的Charts.jsx文件中，引入SolidApexCharts和chartData。

文件路径：源代码/组件/图表.jsx

import { SolidApexCharts } from 'solid-apexcharts';
import { chartData } from '../App';

现在添加以下代码行来创建一个图表函数：

文件路径：源代码/components/图表.jsx

function Charts() {

  return (
    <SolidApexCharts width="1200" type="bar" options={chartData()}  />
  );
};

export default Charts;

图表功能将使用先前设置的chartData变量中的信息来创建一个宽度为1200像素的柱状图。您将chartData作为options的值传递，并在SolidApexCharts组件中设置图表的宽度和类型。

保存并关闭文件。

打开源代码中的src/App.jsx文件。

nano src/App.jsx

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

文件路径：App.jsx

import { createSignal, createEffect } from "solid-js";
import styles from './App.module.css';
import Charts from './components/Charts';

const [chartData, setChartData] = createSignal({});

function App() {

  return (
    <div class={styles.App}>
      <h2>在SolidJS中使用ApexCharts.js创建图表</h2>
      <h3>柱状图</h3>
      <Charts />
    </div>
  );
};

export { chartData }

export default App;

首先，导入Charts组件。之后，在h3元素的下方添加<Charts />组件，以在应用程序运行时进行渲染。这一行将显示具有动态数据的柱状图。

保存并关闭文件。

当你在浏览器中刷新你的应用程序时，柱状图将会呈现。

您还可以在Silicon Cloud社区存储库中查看此教程创建的文件。

结论

在这篇文章中，您构建了一个SolidJS应用程序，从API中提取数据来创建图表。您在SolidJS应用程序中使用了ApexCharts和Solid-ApexCharts进行数据可视化。现在您可以使用动态数据制作其他类型的图表。尝试将图表从柱状图调整为ApexCharts支持的其他类型的图表。

要了解更多关于SolidJS及其特性的信息，请访问SolidJS文档。要了解更多关于ApexCharts及其他可用配置的内容，请查阅ApexCharts文档。

#ApexCharts #SolidJS #前端开发 #图表库 #数据可视化