JS图表控件LightningCharts JS使用教程：创建饼形图

上篇文章，我们介绍了利用LightningChart生成饼图关于数据源的相关内容，现在我们来介绍如何具体创建饼形图。

上篇文章，我们介绍了利用

1. 我们现在开始编写 LightningChart 图表。打开文件“PieChart.ts”并导入我们的 JSON 文件：


//Import data json fileimport city from './cities.json';

2. 导入 LightningChart JS 库：


// Import LightningChartJSConst lcjs = require('@arction/lcjs')

注意： @ arction/lcjs 库是在我们项目的初始设置期间下载的。这将位于 [node_modules/@arction] 文件夹内。

我们将导入 LightningChart 集合，以便在我们的饼图中使用它们：



//Extract required properties from LightningChartJS   const {                 LightningChart,      PieChartTypes,                 LegendBoxBuilders,                 SliceLabelFormatters,             Themes   } = lcjs

PieChartTypes= PieChart 实现的集合 。每个选项都可以有自己的视觉设计和 自定义API 。

LegendBoxBuilders=可用的集合 LegendBoxBuilders。要构建 LegendBoxes ，您必须将其中之一传递给方法： . addLegendBox()

SliceLabelFormatters= 它允许我们为图表中的标签提供自定义格式。

Themes= 预先设计的主题集合。这些主题有自己的调色板和其他图形界面属性。

3. 现在我们将添加一个短条件：

“如果窗口分辨率足够宽，将选择带有外部标签的饼图，否则将显示在每个切片内。”



const pieType = window.innerWidth > 599 PieChartTypes.LabelsOnSides : PieChartTypes.LabelsInsideSlices

4. 是时候创建我们的饼图实例了。

在我们的对象中，我们将分配图表的类型（在本例中为“ PieType”）和图表的主题。在 Title 值中，我们可以直接写出我们图表的标题。

对于此示例，我将采用ChartName位于 JSON 文件中的“”节点。

为了访问这个节点，我们在代码开头使用通过导入 JSON 文件创建的“city”对象。



const pie = lightningChart().Pie({   theme: Themes.darkGreen ,   type: pieType})   .setTitle(city.chartName)   .setAnimationsEnabled(true)   .setMultipleSliceExplosion(true)

对于这个示例，我决定使用“深绿色”主题，但LightningChart 为我们提供了多种主题，只需键入主题名称即可。

5. 最后，我们将值分配给图表的标签：

// Select json dataconst data = city.members// ----- Create Slices -----const slices = data.map((item) => pie.addSlice(item.id+'-'+item.name, item.population))// Specify function which generates text for Slice Labels(LabelFormatter).pie.setLabelFormatter(SliceLabelFormatters.NamePlusRelativeValue) // ----- Add LegendBox -----pie.addLegendBox(LegendBoxBuilders.VerticalLegendBox)// Dispose example UI elements automatically if they take too much space. This is to avoid bad UI on mobile / etc. devices..setAutoDispose({type:  'max-width',maxWidth: 0.30,}).add(pie)

“ resolveJsonModule”选项允许我们将 JSON 模块导入 TypeScript 模块。

如果您还记得，“ city”对象指的是我们的 JSON 文件，因此我们将 members 数组分配给 data 变量。这样，我们将能够访问位于成员内部的所有节点。

在 slices 常量中，我们将为在成员中添加的每个部分创建一个幻灯片。

该函数将为每个成员.map 执行该函数。

在内部addSlice，必须分配两个值：标记值和用于计算每张幻灯片大小的数值。

最后，对标签进行格式化，并添加图例框。

该框被分配了宽度，并指定了它对应的图形。

将看到我们的项目是如何编译的：

如果我们按住control键点击我们项目运行的路径，我们的默认浏览器会打开，我们可以看到结果：

在图表中，我们可以与每个对象进行交互，生成有助于我们更好地理解所显示信息的动画。

可以项目程序，使用 LightningChart JS 生成自己的饼图。

项目下载

LightningChart JS | 下载试用

以上就是关于LightningChart JS使用教程中使用 NodeJS、TypeScript 和 LightningChart 创建 JavaScript 饼图序创建饼形图的相关内容。

欢迎LightningChart技术交流群，获取最新产品咨询：

LightningChart JS是性能最高的JavaScript图表库，专注于实时数据可视化。

想要了解或购买LightningChart JS正版授权的朋友，欢迎咨询官方客服

标签：