图表控件AnyChart教程：使用JavaScript构建Marimekko图表-控件新闻-慧都网

图表控件AnyChart教程：使用JavaScript构建Marimekko图表

原创|使用教程|编辑：杨鹏连|2020-12-28 11:04:25.090|阅读 223 次

概述：您是否想知道如何使用JavaScript轻松地为基于HTML5的应用程序和网页创建交互式Marimekko图表？如果是，那么您将是学习此方法的最佳途径。

相关链接：

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

点击下载AnyChart正式版

您是否想知道如何使用JavaScript轻松地为基于HTML5的应用程序和网页创建交互式Marimekko图表？如果是，那么您将是学习此方法的最佳途径。

Marimekko图表也称为Mekko图表和市场地图，其Y轴显示的数值从0％到100％不等。最令人兴奋的部分在于它们的X轴，它表示类别中值的总和。每个类别在X轴上的宽度代表整个类别对所有数据总量的贡献。简而言之，这是一种可视化分类数据的堆叠图表。尽管如此，通过确定每个段的宽度和高度，Y轴和X轴都在百分比刻度上变化。

您是智能手机发烧友并且有兴趣按季度和供应商查看2019年全球智能手机出货量吗？然后，特别要遵循本教程，因为我们将使用简单的JS图表编码技术在优雅的Marimekko图表中可视化此市场数据。

如何创建基本的JS Marimekko图表

在JavaScript图表中可视化数据的一般顺序包括以下简单的四个步骤，并且构建JS Marimekko图表也不例外：

创建带有容器的HTML页面以显示图表。
连接您需要的所有脚本。
加载需要在图表中可视化的数据。
最后，编写JS图表代码。

现在，让我们深入研究每个步骤以绘制漂亮的Marimekko图表。

步骤1：建立HTML网页

第一步是建立一个基本的HTML页面来放置Marimekko图表。

<!DOCTYPE html>
<html>
  <head>
    <title>My Marimekko Chart Example</title>
    <style>
      html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
      // Marimekko chart code goes here
  </body>
</html>

上面开发的HTML页面由两个主要部分组成，标题（在<head></head>标签之间）和页面主体（在<body></body>标签之间）。在页眉部分，我们设置了HTML页面标题（在<title></title>标签之间）和CSS规则（在<style></style>标签之间）来管理container元素的外观。

div正文部分中ID为的元素container是将用于放置Marimekko图表的块。由于我希望图形显示在整个HTML页面上，因此我将容器元素的width和height字段设置为100％。因此，该图表将显示在整个页面上。

步骤2：连接所有必需的脚本

接下来，我们应该连接构建Marimekko图表所需的所有JavaScript脚本。

通常，对于所有JavaScript图表库来说，构建Marimekko或基本上任何其他图表的这些简单步骤都是相同的。在本教程中，我将以AnyChart为例。它是用于交互式数据可视化的流行的灵活JS库，它具有出色的文档和API参考以及许多演示，因此即使对于初学者来说，也很容易上手。

AnyChart具有模块化系统，这意味着您不需要整个库，而只能连接实际需要的那些图表类型和功能。这样，可以大大减少网页上运行的JavaScript代码的大小。它总是对性能有好处。因此，在我们的案例中，应使用“基本”和“ mekko”模块来表示Marimekko图表中的数据。它们将在标记的<head></head>部分中进行引用<script></script>。

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

构建Marimekko图表所需的JavaScript代码应写在<body></body>HTML页面的标签之间。

以下是带有新更改的代码外观。是不是很酷？伙计们，继续读书。我们正在接近最令人兴奋的部分。

<!DOCTYPE html>
<html>
  <head>
    <title>My Marimekko Chart Example</title>
    <script src="//cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js"></script>
    <script src="//cdn.anychart.com/releases/8.9.0/js/anychart-mekko.min.js"></script>
    <style>
      html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      // Marimekko chart code goes here
    </script>
  </body>
</html>

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

如本教程开头所述，Marimekko属于2D堆叠图系列，但它通过改变列宽说明了数据的附加维。此图表类型广泛用于解释销售数据和执行市场分析，但是请确保您已根据需要正确选择数据。

您是否对2019年喜爱的智能手机品牌的全球出货量感到好奇？等待，让我们更深入地研究并季度可视化发货，以便使数据适合于Marimekko图表。

在当前情况下，Marimekko图表将用于说明2019年季度智能手机出货量排名前六的品牌（百万）。以下是我们将要使用的数据集。（来源：IDC。）

Mekko图形的奇妙之处在于，两个轴都以百分比表示数据，但是您只需要输入实际数据，图表便会自动计算所有数据。

我们将移动货件数据转换为特定的JavaScript对象，如下所示。它以数组数组的形式保存数据标题设置，标题和数据本身。

X轴包含每个智能手机品牌的总出货量，而Y轴用于按季度读取每个智能手机品牌的出货量百分比。

以下是我们将要使用的数据集。header以下JavaScript对象的设置用于设置每个智能手机生产商品牌的季度详细信息。因此，我们将看到季度关系。

var data = {
  title: 'Global Smartphone Shipments (In Millions) in 2019, quarterly',
  header: ['Name', 'Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
  rows: [
    ['Huawei', 59.1,56.6,66.8,56.2],
    ['Vivo', 23.9,27,31.3,31.5],
    ['Apple', 42,36.5,44.8,72.3],
    ['Samsung', 72,76.3,78.2,70.4],
    ['Xiaomi', 27.8,32.3,31.7,32.9],
    ['Oppo', 25.7,30.6,32.3,31.4],
    ['Others', 90.5,97.7,94.9,106.4],
  ]
};

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

完成所有准备工作后，我们可以进入最后一节以显示最期待的Marimekko图表。负责显示Marimekko图表的整个JavaScript图表代码必须插入标记anychart.onDocumentReady()内编写的函数内<script>。顾名思义，该函数将等待页面准备显示数据。

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

然后，使用步骤3中的代码来生成需要馈送到Mekko图表的数据。

var data = {
  title: 'Global Smartphone Shipments (In Millions) in 2019, quarterly',
  header: ['Name', 'Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
  rows: [
    ['Huawei', 59.1,56.6,66.8,56.2],
    ['Vivo', 23.9,27,31.3,31.5],
    ['Apple', 42,36.5,44.8,72.3],
    ['Samsung', 72,76.3,78.2,70.4],
    ['Xiaomi', 27.8,32.3,31.7,32.9],
    ['Oppo', 25.7,30.6,32.3,31.4],
    ['Others', 90.5,97.7,94.9,106.4],
  ]
};

下一步是指定JS图表类型。在这种情况下，我们应该使用mekko图表并将其与要在Marimekko图表中可视化的数据一起输入。

// create a mekko (marimekko) chart
var chart = anychart.mekko();
// set the chart data
chart.data(data);

让我们启用图表的图例，如下所示。

// enable the chart legend
chart.legend(true);

最后，命令在容器中绘制Marimekko图表：

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

这是我们等待的结果。（请参阅AnyChart Playground上的基本Marimekko图表。）

上面基本的交互式HTML5 Marimekko图表的完整代码如下。

<!DOCTYPE html>
<html>
  <head>
    <title>My Marimekko Chart Example</title>
  <script src="//cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js"></script>
  <script src="//cdn.anychart.com/releases/8.9.0/js/anychart-mekko.min.js"></script>
    <style>
      html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container">
    <script>

      anychart.onDocumentReady(function () {

        // create data
        var data = {
          title: 'Global Smartphone Shipments (In Millions) in 2019',
          header: ['Name', 'Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
          rows: [
            ['Huawei', 59.1,56.6,66.8,56.2],
            ['Vivo', 23.9,27,31.3,31.5],
            ['Apple', 42,36.5,44.8,72.3],
            ['Samsung', 72,76.3,78.2,70.4],
            ['Xiaomi', 27.8,32.3,31.7,32.9],
            ['Oppo', 25.7,30.6,32.3,31.4],
            ['Others', 90.5,97.7,94.9,106.4],
          ]
        };

        // create a mekko (marimekko) chart
        var chart = anychart.mekko();

        // set the chart data
        chart.data(data);

        // enable the chart legend
        chart.legend(true);

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

        // draw the resulting marimekko chart
        chart.draw();

      });

    </script>
  </body>
</html>

自定义JS Marimekko图表

好吧，这部分是为蛋糕锦上添花。您在AnyChart中拥有大量的文档资源，可以在其中获得深入的知识，以改进，更改和自定义生成的图表。要获取灵感，请查看演示库。

让我们尝试修改我们的JavaScript Marimekko图表，使其外观更加优雅。

使用调色板更改图表颜色

可以使用“调色板”选项自定义Marimekko图表的颜色。请参阅本手册以找到有关AnyChart调色板的更多详细信息。在下面的例子中，我们应用了Wines面板。还有更多的预建调色板正在等待您。

// apply a palette for coloring
chart.palette(anychart.palettes.wines);

图表不是很方便吗？（在AnyChart Playground上查看。）

格式化图表轴

以下代码附加内容用于通过添加标题和更改轴的方向来格式化轴。

这是包含轴标题的代码：

// set the x-axis title
chart.xAxis().title('Smartphone Shipments by Brands');
// set the y-axis title
chart.yAxis().title('Smartphone Shipments by Quarters %');

Y轴的方向可以是左侧或右侧。保留默认值。X轴的方向可以设置为顶部或底部，默认情况下将其设置为底部。根据您的兴趣配置它们。在两个轴的方向上进行以下更改。出于演示目的，将X轴和Y轴的方向设置为顶部和右侧。

// set the x-axis orientation
chart.xAxis().orientation("top");
// set the y-axis orientation
chart.yAxis().orientation("right");

该图表似乎更易于使用轴标题。（在AnyChart Playground上查看。）

从下一个示例开始，Marimekko图表轴的方向将恢复为默认外观。

设置图表格式的工具提示

工具提示通常是隐藏的，但是当悬停在图表的点上时，它们会变得可见。这可以用来显示其他有用的信息。

第一步，让我们生成悬停时需要显示的信息。根据以下代码段，我们显示seriesName（季度）和value（（相应季度的发货金额，以百万美元为单位）。

// customize the tooltip format
chart.tooltip().format('{%seriesName}: ${%Value}M');

“联合”显示模式有助于一次显示所有季度的数据。

// set the tooltip display mode
chart.tooltip().displayMode("union");

以下只是对Marimekko图表工具提示标题的视觉外观进行的另一种简单修改。我们可以如下所示更改字体大小，背景外观和字体粗细。

// customize the tooltip title
var title = chart.tooltip().title();
title.fontFamily("Calibri");
title.fontDecoration("underline");
title.fontWeight(700);
title.fontSize(18);

我们基于JS的Marimekko图表似乎变得越来越好，更具可读性。（在AnyChart Playground上查看。）

格式化图表标签设置

标签是可以与图表上的点一起显示的文本框。标签通常指示每个点包含的信息。让我们在此Marimekko图表中配置标签，以添加每个季度的装运价值以百万美元显示。

// set the chart labels settings
chart.labels().format('${%Value}M');

最后，这是我们在如上所述进行相关自定义后的交互式Marimekko图表的外观。（在AnyChart Playground上查看。）

新定制的高级Marimekko图表比初始可视化看起来更具信息量和吸引力。您可以发挥创意，以向图表显示更多详细信息。

根据最终确定的Marimekko图表，三星是2019年全球领先的智能手机供应商。但是请注意，三星！华为似乎很快就会挑战您。您是否注意到苹果在第四季度的表现异常出色，击败了所有竞争对手？这项杰出成就背后的成功故事是iPhone 11系列的发布，引起了全球众多人的关注。

伙计们，请使用您的数据，因为他们正在等待为您揭示令人兴奋的信息。

以下是本教程中最终Marimekko图表的完整HTML代码：

<!DOCTYPE html>
<html>
  <head>
    <title>My Marimekko Chart Example</title>
  <script src="//cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js"></script>
  <script src="//cdn.anychart.com/releases/8.9.0/js/anychart-mekko.min.js"></script>
    <style>
      html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container">
    <script>

      anychart.onDocumentReady(function () {

        // create data
        var data = {
          title: 'Global Smartphone Shipments (In Millions) in 2019',
          header: ['Name', 'Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
          rows: [
            ['Huawei', 59.1,56.6,66.8,56.2],
            ['Vivo', 23.9,27,31.3,31.5],
            ['Apple', 42,36.5,44.8,72.3],
            ['Samsung', 72,76.3,78.2,70.4],
            ['Xiaomi', 27.8,32.3,31.7,32.9],
            ['Oppo', 25.7,30.6,32.3,31.4],
            ['Others', 90.5,97.7,94.9,106.4],
          ]
        };

        // create a mekko (marimekko) chart
        var chart = anychart.mekko();

        // set the chart data
        chart.data(data);

        // enable the chart legend
        chart.legend(true);

        // apply a palette for coloring
        chart.palette(anychart.palettes.wines);
  
        // customize the tooltip format
        chart.tooltip().format('{%seriesName}: ${%Value}M');
        // set the tooltip display mode
        chart.tooltip().displayMode("union");

        // customize the tooltip title 
        var title = chart.tooltip().title();
        title.fontFamily("Calibri");
        title.fontDecoration("underline");
        title.fontWeight(700);
        title.fontSize(18);
  
        // set the chart labels settings
        chart.labels().format('${%Value}M');
  
        // set the x-axis title
        chart.xAxis().title('Smartphone Shipments by Brands');
        // set the y-axis title
        chart.yAxis().title('Smartphone Shipments by Quarters %');

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

        // draw the resulting marimekko chart
        chart.draw();

      });

    </script>
  </body>
</html>

结论

使用JavaScript构建Marimekko图表是否比指南开始时想象的要容易呢？某些诸如此类的图表库的API易于访问，内容丰富，并且可以使您的数据可视化开发工作变得非常容易。可用的强大文档将帮助您快速解决编码时可能遇到的任何问题。祝好运！

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

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

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