用React和Semantic-UI创建响应式线图和柱状图
图形表示法是可视化和分析数据的最普遍的方法之一。最常见的数据图形表示类型是柱状图和条形图。
线形图和条形图在数据可视化和表示方面有各种应用。这些图表的应用包括用户参与度的统计、用户增长、产品的评级和其他商品。
本教程将介绍建立一个响应式图表项目所需的各种步骤和依赖性。我们将使用React.js、semantic-ui和CSS来生成带有一组坐标和数据集的线图和柱状图。
可以把它看作是用数学中的一组变量来绘制图表，但在这种情况下是用React.js。
主要收获
完成本教程后，读者应了解以下内容。
- 开始使用React功能组件
- 在您的网络项目中安装并添加语义-UI依赖项
- 用React.js创建可重复使用的组件
- 用react-chartjs-2生成线图和柱状图
- 利用CSS和semantic-ui对组件进行造型设计
前提条件
本教程要求具备React.js、CSS以及类似于Semantic-UI的任何现代网络样式库的中级知识。
开始使用React功能组件
React功能组件是相对于React.js组件的一种现代方法。它是在2018年推出的，以前的方法是依靠基于类的组件。功能性组件是一个React函数，它接受props ，并返回一个JSX（JavaScript语法扩展）。
React.js中的道具是传递给React组件的参数或参数，以进行渲染。在本教程中，我们将为我们的应用程序采用反应功能组件。
为了开始，我们需要创建chart-app 。创建一个react-app是通过create-react-app 命令来获得运行一个React应用的软件包和文件的基本概要的。所以，点击打开命令终端，运行下面的命令。
npm create-react-app chart-app
或者对于yarn用户
yarn create-react-app chart-app
如果上面的命令被正确执行，新的React应用程序应该被设置好，并准备好进行开发。这个过程需要几分钟的时间，所以在进行下一步之前要确保操作完成。
图表构建概述
用React.js和其他依赖项一起创建响应式线条图和柱状图，将被细分为以下步骤。
- 设置坐标数据集
- 安装所需的依赖项（react-chartjs-2和semantic-UI。）
- 创建和设置图表组件（Chart.js）。
- 设计和查看我们的应用程序 现在让我们从第一步开始，好吗？
设置坐标数据集（Data.js）
坐标数据集类似于代数中绘制图表时的数值表。它为图表组件提供了一组数字和标签，这些数字和标签将作为props ，并被显示出来。
为了设置坐标数据集，我们导航到src 文件夹，然后创建一个Data.js 文件。在Data.js ，我们实现下面的代码片断。
let demoChart1 = {
data1: (canvas) => {
let vas = canvas.getContext("2d");
let linearstroke = vas.createLinearGradient(0, 230, 0, 50);
linearstroke.addColorStop(1, "rgba(7, 105, 204, 0.2)");
linearstroke.addColorStop(0.4, "rgba(17, 135, 253, 0)");
linearstroke.addColorStop(0, "rgba(29,140,248,0)");
return {
labels: [ "MON", "TUE", "WED", "THUR", "FRI", "SAT", "SUN",],
datasets: [
{
label: "My cordinates",
backgroundColor: linearstroke,
borderWidth: 2,
borderColor: "#085aa1",
pointBackgroundColor: "#085aa1",
pointBorderColor: "rgba(255,255,255,0)",
pointBorderWidth: 15,
pointHoverRadius: 4,
pointRadius: 3,
data: [70, 90, 105, 110, 85, 105, 115],
},
],
};
},
options: FirstChartOption,
};
module.exports = {
demoChart1
};
在上面的代码片断中，我们使用了canvas，它被用来在React.js中渲染图形元素。
- 我们创建了一个2D线性梯度，并将其命名为
linearstroke。然后，我们将用它来生成上面提到的数据集的线图和柱状图。 - 我们还添加了一些显示在图表底部的标签，为相应的数据提供名称，即（"MON "代表70，"TUE "代表90）。
- 最后，我们为数据集添加了
border-width,border-color,background-color, 和其他样式属性。应该提供这些默认属性，使图表看起来很好，很有表现力。
为了结束坐标设置，我们需要创建我们上面传递给demoChart 的参数（选项）。选项将提供x轴和y轴、响应度、刻度、间距等。要在Data.js 文件中做到这一点，请运上面的代码片段。
let FirstChartOption = {
maintainAspectRatio: false,
legend: {
display: false,
},
tooltips: {
backgroundColor: "#f5f5f5",
titleFontColor: "#333",
bodyFontColor: "#666",
bodySpacing: 4,
xPadding: 12,
mode: "nearest",
intersect: 0,
position: "nearest",
},
responsive: true,
scales: {
yAxes: [
{
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: "rgba(29,140,248,0.0)",
zeroLineColor: "transparent",
},
ticks: {
padding: 20,
fontColor: "#9a9a9a",
},
},
],
xAxes: [
{
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: "rgba(29,140,248,0.1)",
zeroLineColor: "transparent",
},
ticks: {
padding: 20,
fontColor: "#9a9a9a",
},
},
],
},
};
注意：为了解决可能出现的错误，将我们刚刚创建的FirstChartOption 放在DemoChart 的上面。因为我们试图在声明之前使用一组变量，而React.js对此很不满意。
我们在选项中为图表添加了barpercentage,paddings,fontColors, 等等。如前所述，这些是提供给图表组件的默认属性。
安装所需的依赖项
正如你所观察到的，我们跳过了安装依赖项来设置我们的坐标数据集。无论你选择哪种方式进行项目，都是可以的。我们将为我们的应用程序安装以下依赖项。
- Semantic-ui-react和
- React-chartjs-2要安装上述依赖项，请打开
package.json文件并添加以下依赖项。
"dependencies": {
"react-chartjs-2": "2.11.1",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^2.0.3"
},
完成之后，打开command terminal ，运行下面的命令。
npm install
或者对于yarn用户。
yarn add
上面的命令应该将列出的依赖项安装到我们的应用时间，以便在下一步中利用它们。
设置图表组件(Chart.js)
图表组件将使用我们上面安装的 react-chartjs-2 依赖项和我们先前创建的坐标数据集进行设置。React-chartjs-2提供了线图、柱状图、饼状图等，供导入和使用。
在本教程中，我们将使用线图和柱状图。为了创建和设置我们的图表组件，在我们的App.js 文件中，清除默认的模板代码，用下面的代码片段代替。
import React from "react";
import { Line, Bar } from "react-chartjs-2";
// semantic-ui components
import { Card} from "semantic-ui-react";
import {demoChart1} from "./Data.js";
function Chart() {
const [demoChartData, setdemoChartData] = React.useState("data");
return (
<>
<div className="container">
<Card className="card-chart">
<Card.Header>
<h5 className="card-details">Total Visits</h5>
<h2>Guests</h2>
</Card.Header>
<Card.Content>
<div className="chart-zone">
<Bar
data={demoChart1[demoChartData]}
options={demoChart1.options}
/>
</div>
</Card.Content>
</Card>
<Card className="card-chart">
<h5 className="card-details">Total Inmates</h5>
<Card.Content>
<div className="chart-zone">
<Line
data={demoChart1.data}
options={demoChart1.options}
/>
</div>
</Card.Content>
</Card>
</div>
</>
);
}
export default Chart;
让我们讨论一下刚才的代码片断是怎么回事。首先，我们导入了我们在第一步创建的数据集。然后，我们从react-chartjs-2 库中导入了Line, 和Bar （线状图为Line，条状图为Bar）组件，这些组件将用于利用数据集并随后生成我们的图表。
- 其次，我们从我们先前安装的semantic-UI依赖关系中导入了Card组件。Card组件将作为图表的容器，并增加额外的样式和响应性。
- 线形图和柱形图接受两个
props，data和options。对于数据，我们向下传递demoChart1.data，然后对选项重复同样的操作，用选项替换数据。 - 线形图和柱形图接受两个
props,data和options。对于数据，我们向下传递demoChart1.data，然后对选项重复同样的操作，用选项替换数据。 - 最后，我们导出了图表组件，以便在浏览器窗口上查看。
造型和查看我们的应用程序
在这一点上，我们的应用程序已经准备好进行样式设计和查看。由于我们使用的大部分元素都来自Semantic-UI design library ，默认的样式已经被添加到图表和文本中，所以我们将添加一些衬垫和边距来保持简单。
请自由发挥，不要局限于我们将添加的基本样式。向应用程序添加样式很容易。打开src 文件夹中的App.css ，清除所有的默认样式，然后用下面的CSS片段替换它们。
.container {
padding-left: 30px;
margin: 0;
height: 100%;
width: 100%;
}
.chart-zone {
padding: 10px 0 25px;
height: auto;
width: 100%;
}
.card-details {
text-transform: capitalize;
font-weight: 400;
color: rgba(255, 255, 255, 0.6);
font-size: 0.75rem;
}
我们已经成功地为我们的应用程序添加了一些样式，即：font-weight ，color ，调整了font-size ，添加了100%的width 和height ，最后是一些margin ，和padding 。
完成这些后，现在是在浏览器窗口上查看我们的应用程序的时候了。首先，在你的文本编辑器上打开命令终端，一定要在chart-app 根目录内，然后运行命令，启动下图所示的开发服务器。
npm start
或者对于yarn用户
yarn start
一旦开发服务器启动并运行，它将在你的默认浏览器上打开一个新的标签，显示出漂亮的图表。
总结
本教程涵盖了利用semantic-ui和React.js创建响应式线条图和柱状图的各个方面。该教程很简单，便于理解和清楚。欢迎在你未来的应用程序中使用本文所讨论的概念。
