用ApexCharts在React中制作图表

当涉及到研究领域时，与你的听众分享你的发现是至关重要的。最常见的方法之一是使用图表。

那么，你如何在你的网站上呈现你的图表？一种方法是使用图像。在某些情况下，这是完全可以的。然而，在这种情况下，有一个小小的问题：有时，图像在高像素的屏幕上不能很好地呈现。此外，它们在放大后会变得模糊不清。

为了缓解这种情况，你必须提高图形的分辨率。但这将导致另一个问题：更大的图片会占用更多的内存，因此需要更长的时间来加载。我们怎样才能摆脱这个问题呢？

幸运的是，这就是ApexCharts.js出现的地方。它是一个易于使用的开源库，允许你为你的项目建立交互式图表。
下面是它的一些特点。

• 响应性。你的图表将根据浏览设备的大小进行调整。这有助于为所有设备提供更好的用户界面。
• 注释。Apex还允许你在图表上添加标签，从而帮助读者轻松地理解图形。
  
• 动画。就像注释一样，动画可以带来更好的用户体验。最重要的是？你甚至可以定制你的动画的外观和感觉。
  

开始使用ApexCharts

在具体化图表之前，我们首先需要初始化一个React项目。

npx create-react-app apex-tutorial

接下来，为了安装所需的依赖项，执行以下终端命令。

npm install apexcharts react-apexcharts

条形图

当你想展示你的数据的各个子组之间的数值比较时，条形图很有用。一个值得注意的例子是比较多座摩天大楼的高度。

在X轴上显示整数

我们将复制这个来自Math Goodies的样本数据。

这段代码使用上面的数据渲染了一个基本的柱状图。

export default function SampleLine() {
  const series = [
    {
      name: "Temperature in Fahrenheit", //will be displayed on the y-axis
      data: [43, 53, 50, 57]
    }
  ];
  const options = {
    chart: {
      id: "simple-bar"
    },
    xaxis: {
      categories: [1, 2, 3, 4] //will be displayed on the x-asis
    }
  };
  return (
    <div>
      <Chart options={options} type="bar" series={series} width="80%" />
    </div>
  );
}

正如你所看到的，Chart 组件接受了三个重要的道具。

• options 道具指定了图表的配置。这里，我们指定了X轴的标签。
• type 道具告诉ApexCharts我们要显示哪种图表。在这种情况下，我们呈现的是一个条形图。
• series 道具包含我们想要显示的数据。Apex将在Y轴上显示这个数据
  

在X轴上显示字符串

在这个例子中，我们将从Statistics How To加载这个数据集。

我们可以通过编写以下代码来渲染这些数据。

const series = [
  {
    name: "Height in feet",
    data: [2722, 2080, 2063, 1972, 1516],
  },
];
const options = {
  chart: {
    id: "simple-bar",
  },
  xaxis: {
    categories: [
      "Burj Khalifa",
      "Tokyo Sky Tree",
      "KVLY-TV mast",
      "Abraj Al-Bait Towers",
      "Bren Tower",
    ],
  },
};

return (
  <div>
    <Chart options={options} type="bar" series={series} width="80%" />
  </div>
);

注意，这一次，我们在xaxis.categories 属性中传入了一个字符串值的数组。不需要进一步的配置!
这将是该程序的输出。

改变图表的方向

默认情况下，Apex以垂直方向显示我们的图表。你可以通过使用option.plotOptions.bar.horizontal 属性来水平呈现它们。

const options = {
  plotOptions: {
    bar: {
      horizontal: true, //horizontal bar chart
    },
  },
  //extra code removed for brevity
};

return (
  <div>
    <Chart options={options} type="bar" series={series} width="80%" />
  </div>
);

在上面的片段中，我们将horizontal 属性设置为true 。这将翻转图表的方向。

饼图和甜甜圈图

饼图允许你以百分比或比例的方式显示数据。

为了演示饼图，我们将使用Math Is Fun的这个数据集。

就像柱状图一样，构建饼状图也很容易。要做到这一点，你需要传入你的数据，并像这样将type 道具分配给pie 。

const options = { labels: ["Comedy", "Action", "Romance", "Drama", "SciFi"] };
const series = [4, 5, 6, 1, 5]; //our data

return (
  <div className="donut">
    <Chart options={options} series={series} type="pie" width="380" />
  </div>
);

这里，options.label 属性包含一个数组。这个数组中的每个元素都对应于图表中的一个部分。后来，我们把type 这个道具改为pie 。这将告诉Apex渲染一个饼图。

要想把它变成一个甜甜圈图，就把type 的值修改为donut 。

<Chart options={options} series={series} type="donut" width="380" />

线形图

作为一个例子，我们将使用来自Chartio的这个表格，这种类型的图表在你想描述与时间有关的趋势或行为时很常见。

渲染单一数值

为了开始使用线形图，让我们只显示Guests 列。在下一节中，我们将在同一个图表中同时显示Guests 和Subscribers 。
以下代码渲染了来自Guests 数组的信息。

const series = [
    {
      name: "Guests",
      data: [19, 22, 20, 26]
    }
  ];
  const options = {
    xaxis: {
      categories: ["2019-05-01", "2019-05-02", "2019-05-03", "2019-05-04"]
    }
  };
  return <Chart type="line" series={series} options={options} />;

在这段代码中，我们正在渲染Guests 字段。此外，我们还在X轴上使用了日期值。Apex会自动解析这些值并以时间轴的形式显示。

渲染多个值

Apex库还允许用户在同一个图形中绘制多个数据集。

在这里，我们这次将同时渲染Guests 和Subscribers 数据。

要在你的工作表中添加更多的数据，可以像这样在series 数组中追加一个对象。

const series = [
  {
    name: "Guests",
    data: [19, 22, 20, 26],
  },
  //additional data in this array..
  {
    name: "Subs",
    data: [103, 105, 98, 83],
  },
];

这将是结果。

组合图表

在某些情况下，在一个图表中显示多种图表类型是很常见的。其中一个例子是将柱状图和折线图结合在一起。
要用Apex图表做到这一点，你可以在series 数组中指定type 属性，像这样。

const series = [
  {
    type: "line", //render a line chart for this data
    name: "Guests",
    data: [19, 22, 20, 26],
  },
  {
    type: "column", //use column chart here.
    name: "Subscribers",
    data: [103, 105, 98, 83],
  },
];
return (
  <div>
    <Chart options={options} type="line" series={series} width="80%" />
  </div>
);

在这里，我们在一个折线图中渲染Guests 数据。后来，我们告诉React用条形 (column) 图来表示Subscribers 数据集。

笔画定制

Apex甚至为开发者提供了自定义线条外观的选项。

要选择看起来更平滑的线条，将options.stroke.curve 属性改为smooth 。

const guestOption = {
  stroke: {
    curve: "smooth",
  },
  //..
};
return (
  <div>
    <Chart type="line" series={guestSeries} options={guestOption} width={500} />
  </div>
);

如果你想使用阶梯曲线，将curve 选项改为stepline 。

const guestOption = {
  stroke: {
    curve: "stepline",
  },
//further code...

径向图

径向图适合用于显示进度。一个例子是显示一个文件下载的进度。

const series = [70]; //70 percent
const options = {
  labels: ["Progress"], //label of this diagram
};
return <Chart type="radialBar" series={series} options={options} />;

这一次，我们将type 属性设置为radialBar 。这将在页面上显示一个圆形仪表。

创建一个加载器栏

为了展示径向条的功能，我们将使用ApexCharts建立一个简单的加载条。

const [progress, setProgress] = useState(0);
let interval = useRef(null);

useEffect(() => {
  interval.current = setInterval(() => {
    setProgress((old) => old + 50);
  }, 1000);
  return () => {
    clearInterval(interval.current);
  };
}, []);

useEffect(() => {
  if (progress < 100) return;
  clearInterval(interval.current);
}, [progress]);

const series = [progress]; //70 percent
return <Chart type="radialBar" series={series} options={options} width={500} />;

下面是对这段代码的解释。

• 在这里，我们使用了一个interval Hook。这是一个useRef 的实例，将负责在整个应用程序的生命周期内控制我们的间隔时间
• 此外，当组件安装到用户界面时，我们告诉React运行一个setInterval 方法。这将使progress 的值以50 单位递增。
• 每次progress Hook发生变化时，应用程序将检查其值是否超过100 。如果满足这个条件，React将从内存中删除该区间。因此，程序会停止递增progress的值。
  

同步的图表

如果你有多个具有相同X轴值的图表，通过同步图表将它们可视化可能是不错的选择。

标准

在你的应用程序中使用同步图表是一个毫不费力的过程，但你必须确保你的代码符合以下条件。

• xaxis.categories ，所有的图表都是一样的
• chart.group 选项应该是相同的。否则，Apex将不会同步你的图表
• 尺寸（width 和height 属性）也应该是相似的
• options.id 对每个图来说应该是不同的。这使得库能够识别每个图形并将它们呈现在屏幕上。

简单的用法

下面的代码片段将显示guests 和subscribers 图形并将它们同步。

//create series and options for our 'guests' data
const guestSeries = [
  {
    name: "Guests",
    data: [19, 22, 20, 26],
  },
];
const guestOption = {
  chart: {
    id: "guest",
    group: "social",
  },
  xaxis: {
    categories: ["2019-05-01", "2019-05-02", "2019-05-03", "2019-05-04"],
  },
};
//create series and options for our 'subscribers' data
const subSeries = [
  {
    name: "Subs",
    data: [103, 105, 98, 83],
  },
];
const subOptions = {
  chart: {
    id: "Subs",
    group: "social", //group name same as guestOptions
  },
  xaxis: {
    categories: ["2019-05-01", "2019-05-02", "2019-05-03", "2019-05-04"],
  },
};
return (
  <div>
    <Chart type="line" series={subSeries} options={subOptions} width={500} />
    <Chart type="line" series={guestSeries} options={guestOption} width={500} />
  </div>
);

在这段代码中，我们为每个数据集创建了一个series 和一个options 对象。还需要注意的是，我们的group 属性和每组的x轴值是相同的。这允许Apex渲染图表，并将它们配对在一起，建立同步的图表。

这将是输出结果。

动画

如前所述，Apex允许开发者修改图表动画以满足他们的需要。在本节中，我们将介绍一些允许控制动画的重要属性。

禁用所有动画

要完全删除动画，可以将options.chart.animations.enabled 属性分配给false 。

const guestOption = {
  chart: {
    animations: {
      enabled: false, //no animations
    },
  },
  //unnecessary code redacted..
};

return (
  <div>
    <Chart options={guestOption} series={series} type="line" />
  </div>
);

上面的代码告诉React渲染图表并删除动画。

改变速度

你可以通过speed 属性来加快或减慢动画的速度。默认值是800 。
在下面的代码中，我们正在加速我们的动画。

const options = {
  chart: {
    id: "simple-bar",
    animations: {
      speed: 100, //make the transition faster
    },
//further code..

要使动画变慢，可以像这样增加speed 的值。

const options = {
  chart: {
    id: "simple-bar",
    animations: {
      speed: 1900, //make the transition slower
    },
//further code..

结论

你可以在这个CodeSandbox中找到这个程序的源代码。

在本指南中，我们讨论了一些重要的图表和概念，以帮助你开始使用Apex图表库。如果你想在你的Web应用中渲染图表，那么Apex Charts将是你的武器库中的一个很好的选择。渲染图表所需的代码行数很少，从而减少了模板代码。

非常感谢您的阅读!

The postCharting in React with ApexChartsappeared first onLogRocket Blog.