图表控件AnyChart如何在JavaScript中构建帕累托图-控件新闻-慧都网

图表控件AnyChart如何在JavaScript中构建帕累托图

翻译|使用教程|编辑：杨鹏连|2021-03-01 10:02:13.937|阅读 216 次

概述：使用JavaScript为HTML5应用程序和网站创建Pareto图表根本不是一个复杂或忙碌的开发过程。获得本教程的动手经验，您会发现数据可视化以一种令人兴奋和激动的形式！

AnyChart是基于JavaScript (HTML5) 的图表控件。使用AnyChart控件，可创建跨浏览器和跨平台的交互式图表和仪表。AnyChart 图表目前已被很多知名大公司所使用，可用于仪表盘、报表、数据分析、统计学、金融等领域。

点击下载AnyChart正式版

æ¾ç¤ºç¨JavaScriptåå»ºçå¸ç´¯æå¾

使用JavaScript为HTML5应用程序和网站创建Pareto图表根本不是一个复杂或忙碌的开发过程。获得本教程的动手经验，您会发现数据可视化以一种令人兴奋和激动的形式！

在开始之前，让我们记住帕累托图的外观及其目的是什么，只是确保我们在同一页面上。帕累托图（也称为帕累托图）是竖线（列）和折线图的组合。列用于描述值，并按从左到右的降序显示。帕累托图表中的线显示了百分比的累计总数。这样的可视化帮助数据科学家和分析人员快速识别出一系列因素中最重要的因素，即那些具有最大价值的因素，因此在所有表示的因素中对总和做出了最重要的贡献。

在此JS Pareto图表教程中，我们将可视化2019年美国主要死亡原因的统计数据，并根据官方数据找出当年造成美国人死亡人数最多的原因。

现在让我们转向JavaScript图表，更准确地说，就是使用JS构建交互式帕累托图表！

（下面是您感兴趣的基于JavaScript的最终Pareto图表的外观。）

建立基本的JS帕累托图

在JavaScript图表中可视化数据的常见顺序基于以下四个步骤。要创建JS Pareto图表，您也应该遵循它们：

首先，生成带有容器的HTML以显示图表。
其次，引用您将要使用的所有JS脚本。
第三，加载需要绘制图表的数据。
第四，编写可视化图表所需的JavaScript代码。

让我们完成所有这些步骤，以制作交互式帕累托图，并了解整个过程，总体上来说非常简单。

步骤1：建立HTML网页

以下代码设置了一个带有容器的HTML页面，以容纳我们的帕累托图。

<!DOCTYPE html>
<html>
  <head>
    <title>Pareto Chart Example</title>
    <style>
      html, body, #container1 {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container1"></div>
      // The Pareto chart code will be put here.
  </body>
</html>

上面开发的HTML页面包括两个主要部分： <head>和 <body>。本<head>节包括两个小节：<title>和<style>。页面标题在此处设置为“帕累托图示例”。该 <style>元素用于将简单的样式表应用于HTML文档，该<body>部分以及<div>ID为'container1'的容器（这是我们放置Pareto图表的位置）。

步骤2：连接脚本

然后，在本<head>节中，我们应该链接构建帕累托图时要使用的所有脚本。

您可以选择使用许多JavaScript图表库来为您的网站或应用程序创建交互式帕累托图。在本教程中，我将使用AnyChart。这是一个非常灵活的JavaScript库，用于跨平台的数据可视化，并提供了大量的图表演示以及大量且极为详细的文档和API参考，从而即使是初学者也可以轻松地对其进行Web开发和编程。

AnyChart具有模块化系统，该系统可让您最大程度地减少需要在页面上运行的JavaScript的数量，因为您不需要加载超过实际需要的内容。要开发帕累托图，您仅需要两个模块：具有所有JS图表库基础知识的“核心”模块和具有帕累托图类型的“ pareto”模块。

<script src="//cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
<script src="//cdn.anychart.com/releases/8.9.0/js/anychart-pareto.min.js"></script>

现在，让我们将这些模块添加到该<head> 部分，如下所示。

<!DOCTYPE html>
<html>
  <head>
    <title>Pareto Chart Example</title>
    <script src="//cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
    <script src="//cdn.anychart.com/releases/8.9.0/js/anychart-pareto.min.js"></script>
    <style>
      html, body, #container1 {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container1"></div>
    <script>
      // The Pareto chart code will be put here.
    </script>    
  </body>
</html>

步骤3：加载您要可视化的数据

对于此JavaScript Pareto图表教程，我决定采用CDC的统计数据，揭示2019年美国十大主要死因。据报告，共有2854,838名居民死亡。十大主要死因占所有死亡的73.4％。帕累托图将按降序显示十个主要死因，以及每个死因对死亡总数的贡献。

因此，让我们首先来看数据集。

使用AnyChart的JS Pareto图表模块，您可以简单地以JavaScript对象的形式设置和馈送数据集（如下所示）。该库将处理构建帕累托图所需的其余工作，例如对因子频率进行排序，将最频繁的因子设置在左侧，将最低的因子设置在右侧，自动计算累积百分比等。

要使用我们的数据生成一个JavaScript对象，我们需要根据以下两个数据字段分别命名为“ x”和“ value”：

“ x”是需要在帕累托图中显示的因子的名称（在我们的情况下，是死因的名称）
"价值”是相应因素的发生频率（在我们的案例中，是该原因导致的死亡人数）

这就是我们的数据的外观：

var data = [
  {x: 'Heart disease', value: 659041},
  {x: 'Alzheimer disease', value: 150005},
  {x: 'Cancer', value: 599601},
  {x: 'Accidents', value: 173040},
  {x: 'Kidney disease', value: 51567},
  {x: 'Suicide', value: 47511},
  {x: 'CLRD', value: 156979},
  {x: 'Stroke', value: 121499},
  {x: 'Diabetes', value: 87647},
  {x: 'Influenza and pneumonia', value: 49783}
];

步骤4：编写JS Pareto图表代码

到目前为止，我们已经掌握了使用JavaScript生成交互式帕累托图的所有基本知识。因此，让我们整理实现目标所需的所有其他信息。

所有JavaScript代码都应放在<script> 标记内。此外，如以下代码片段所示，我们在onDocumentReady函数内编写了与JS代码的帕累托图相关的行。此功能将等待，直到HTML页面完全加载为止。

<script>
  anychart.onDocumentReady(function() {
    // The entire code of the Pareto chart will be here.
  });
</script>

因此，在onDocumentReady函数中，按照步骤3中的说明加载数据。

创建数据对象后，将其馈入帕累托图。

// create a pareto chart
var chart = anychart.pareto();
// feed the data into the chart
chart.data(data);

然后，设置主帕累托图标题，并添加两个Y轴标题，如下所示，以弄清位置是什么：

// set the chart title
chart.title('Number of Deaths for 10 Leading Causes of Death in U.S. in 2019');
// set the measure y axis title
chart.yAxis(0).title('Number of deaths');
// set the cumulative percentage y axis title
chart.yAxis(1).title('Cumulative percentage');

最后的操作是将生成的帕累托图馈送到ID为“ container1”的部门，并根据给定的配置提供绘制图形的命令：

// set the chart container id
chart.container('container1');
// draw the chart
chart.draw();

哇！这就是我们用JavaScript创建的帕累托图最后的样子。它是交互式的，响应迅速！（请参阅AnyChart Playground上的此基本Pareto图表。）

交互式JS / HTML5 Pareto图表的完整代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>Pareto Chart Example</title>
    <script src="//cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
    <script src="//cdn.anychart.com/releases/8.9.0/js/anychart-pareto.min.js"></script>
    <style>
      html, body, #container1 {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <script>

anychart.onDocumentReady(function () {

  // set data
  var data = [
    {x: 'Heart disease', value: 659041},
    {x: 'Alzheimer disease', value: 150005},
    {x: 'Cancer', value: 599601},
    {x: 'Accidents', value: 173040},
    {x: 'Kidney disease', value: 51567},
    {x: 'Suicide', value: 47511},
    {x: 'CLRD', value: 156979},
    {x: 'Stroke', value: 121499},
    {x: 'Diabetes', value: 87647},
    {x: 'Influenza and pneumonia', value: 49783}
  ];

  // create a pareto chart
  var chart = anychart.pareto();
  // feed the data into the chart
  chart.data(data);

  // set the chart title
  chart.title('Number of Deaths for 10 Leading Causes of Death in U.S. in 2019');
  // set the measure y axis title
  chart.yAxis(0).title('Number of deaths');
  // set the cumulative percentage y axis title
  chart.yAxis(1).title('Cumulative percentage');

  // set the chart container id
  chart.container('container1');
  // draw the chart
  chart.draw();

});
    </script>
  </body>
</html>

自定义JavaScript帕累托图

您是否需要使图表更方便，更美观，更易读或将其与其他详细信息一起包装？在AnyChart JS API的帮助下，您有很多选择可以做到这一点。您也可以对帕累托图执行许多视觉设计和功能更改。（有关更多详细信息，请参阅帕累托图文档。）

要获得更多启发，可以查看带有Pareto图表示例的AnyChart画廊。

现在，让我们对基于JS的Pareto图表进行一些改进，使其看起来更加出色–然后关注我！

使用调色板更改帕累托图颜色

您是否要根据自己的喜好更改帕累托图的默认浅蓝色？如果是这样，那么有一种非常方便的方法– 自动着色的调色板！

AnyChart JS图表库中提供了许多预定义的调色板，并且使用它们真的很简单。例如，应用一个称为Earth的地球：

// use one of the pre-built palettes for coloring
chart.palette(anychart.palettes.earth);

下面是新着色的帕累托图。（在AnyChart Playground上查看。）

大地色调的颜色柔和自然，所以我喜欢它。使自己选择的家伙。或根据需要从头开始创建自定义调色板。

格式化帕累托的列和行系列

帕累托图由列和线组成，它们是单独的系列，具有自己的视觉设置。让我们对数据可视化的外观进行一些设计更改。

我们可以使用不同的内置方法来更改数据点的外观。基本上有三种状态：正常，悬停和已选择。该normal()方法用于将点的外观设置为正常状态，即在对点不执行任何操作时。该hovered()方法旨在确定悬停状态下的外观，即当我们悬停在一个点上时的外观。最后，该 selected()方法控制点被单击（选定）时的外观。

这三种方法可以与组合fill()，hatchFill()和stroke()方法。该fill()方法用于用给定的颜色填充点。该hatchFill()方法是用条纹图案填充点。最后，stroke()是更改点轮廓的外观。

让我们首先更改帕累托专栏系列的所有内容：

// configure the visual settings of the first (column) series
chart.getSeries(0).normal().fill("#c98411", 0.3);
chart.getSeries(0).hovered().fill("#c98411", 0.1);
chart.getSeries(0).selected().fill("#c98411", 0.5);
chart.getSeries(0).normal().hatchFill("forward-diagonal", "#c98411", 1, 15);
chart.getSeries(0).hovered().hatchFill("forward-diagonal", "#c98411", 1, 15);
chart.getSeries(0).selected().hatchFill("forward-diagonal", "#c98411", 1, 15);
chart.getSeries(0).normal().stroke("#c98411");
chart.getSeries(0).hovered().stroke("#c98411", 2);
chart.getSeries(0).selected().stroke("#c98411", 4);

接下来，让我们自定义线系列：

// configure the visual settings of the second (line) series
chart.getSeries(1).normal().stroke("#991e00", 4, "4 4", "round");

上面的代码在正常状态下更改了线系列的轮廓。

具有这些新更改的交互式帕累托图显示在下面。现在，可视化效果是否看起来更加有趣？（在AnyChart Playground上查看。）

配置帕累托图工具提示

您知道工具提示的目的是什么？当您将鼠标悬停在图表可视化上的某个点上时，它们就会显示出来，以提供有关相应点的更多信息。

现在，让我们使用帕累托图的工具提示进行更多工作。默认情况下，它显示系列，行（累积百分比）和列（绝对数字）的值。让我们把它们看起来都更整洁，还包括相对百分比。

首先，我们访问列系列并命令工具提示在实际值之前显示文本“ Value：”。

// configure the pareto column series tooltip format
var column = chart.getSeriesAt(0);
column.tooltip().format('Value: {%Value}');

其次，我们访问线系列，并在累积百分比之前添加文本“累积频率：”，并以相同方式设置相对频率值的显示。'\ n'字符用于换行。

// configure the pareto line series tooltip format
var line = chart.getSeriesAt(1);
line
  .tooltip()
  .format('Cumulative Frequency: {%CF}% \n Relative Frequency: {%RF}%');

当工具提示得到这样的改进时，请查看我们的JavaScript Pareto图表的外观。（在AnyChart Playground上查看。）

设置帕累托图标签

通过在每个数据点附近的线系列顶部显示每个因素的累积百分比（在我们的情况下为死亡原因），可以一目了然地使帕累托图更具信息性。看那个：

// set the pareto line series labels
var line = chart.getSeriesAt(1);
line.labels().enabled(true).anchor('right-bottom').format('{%CF}%');

我会很快地解释它。

可以使用chart.getSeriesAt(1)我们前面讨论的方法来获得帕累托图的线系列。一旦获得它，就启用线系列对象的标签。为此， labels().enabled()需要设置方法，并以“ true”作为参数。

该anchor()功能用于设置标签的显示位置。

最后，我们使用该format()方法来配置标签显示格式。

下面是新的交互式JS Pareto图表，现在带有百分比信息标签。（在AnyChart Playground上查看。）

启用帕累托图十字准线

十字准线是跟随鼠标指针的彼此垂直的水平和垂直线。它们使您可以轻松查看任何数据点中的确切值。让我们为帕累托图启用这些功能：

// add and configure the crosshair
chart.crosshair().enabled(true).xLabel(false);

您可以看到该xLabel方法的参数设置为“ false”。因此，X轴上不会显示十字线标签。

以下是带有十字线的帕累托图的外观。（在AnyChart Playground上查看。）

这是本教程的最终交互式JavaScript Pareto图表。看起来不错。

让我们看看在此帕累托图上可以读到的内容。例如，该图表非常清楚地表明，2019年美国人的绝大多数死亡是由于心脏病和癌症所致–这两种主要的死亡原因占前十名中的60％以上。

意外伤害导致173,040人死亡，成为第三大原因。

自杀案件显示在图表的最右角，这意味着在所有十个主要原因中，自杀案件所占的比重最小。尽管如此，这同时是可怕的，在未来几年中，美国当局和非政府组织绝对应该解决这个问题。

结论

如何在JS的帮助下创建交互式帕累托图？实际上，我们只需要创建一个基本的HTML页面，引用必要的JavaScript脚本，加载数据集并根据文档中明确的说明编写一些代码，具体取决于我们希望从这种数据可视化中获得什么。AnyChart API基本上可以处理所有内容，并且使所有内容都变得扑朔迷离。

接下来，随时在Pareto图表上进行更多探索，并使用这些炫酷的可视化工具继续学习。一切顺利！

相关产品推荐：
AnyGantt-构建复杂且内容丰富的甘特图的理想工具

AnyMap-可交互式地图是AnyChart组件

AnyStock-基于XML/JSON的Flash金融图表解决方案

APS帮助提升企业生产效率，真正实现生产排程可视化呈现与控制,快速有效响应不同场景的生产计划，提高准时交货能力，提高产能和资源利用率

想要购买AnyChart正版授权，或了解更多产品信息请点击

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@capbkgr.cn

文章转载自：

上一篇：Excel .NET组件Spire.XLS教程：复制 Excel 中的单元格区域下一篇：图像处理控件Aspose.Imaging功能实操教学：使用Java压缩PNG，JPEG和TIFF图像

彩票走势图

在线采购

中文文档库

试用/Demo下载

开发社群