dingshi7798

g2图表数据实时交互_如何从自定义数据集创建交互式JavaScript图表

g2图表数据实时交互

图表是一种快速有效地可视化复杂数据的好方法。无论您是要确定趋势，突出显示关系还是进行比较，图表都可以帮助您以精确而有意义的方式与受众交流。

在上一篇文章-AnyChart入门：10个实际示例中，我介绍了AnyChart库并演示了它如何非常适合您的数据可视化需求。今天，我想更深入地研究一下AnyChart的数据映射功能，该功能使您能够以最少的麻烦从自定义数据集中创建漂亮的图表。

我还想研究一下可以根据需要自定义AnyChart的多种方法，以及如何通过使用主题来更改AnyChart图表的外观。当前有17个现成的主题可供选择，或者您可以创建自己的主题。而且，如果您对设计没有最好的了解，为什么不买我们的书来加油。

作为AnyChart的研发主管，我可以花一整天的时间讨论这个库，但是现在该开始做生意了。

AnyChart中的数据映射

为了便于将自定义数据源集成到制图应用程序中，AnyChart具有称为数据集的特殊对象。这些对象充当数据的中间容器。当数据存储在数据集中时，AnyChart可以跟踪其更改，对其进行分析并以更健壮和有效的方式使用该数据。简而言之：交互式JavaScript图表从未如此简单！

无论您有对象数组，数组数组还是.csv文件，都可以使用数据集来：

确保完全控制创建的系列
定义哪一列是参数（x轴）
定义哪些列包含哪个系列的值
筛选数据
排序数据

数据映射基础

了解数据映射如何在AnyChart中工作的最好方法是看一个示例。让我们想象一个具有以下自定义数据集的数组：

var rawData = [
  ["A", 5, 4, 5, 8, 1, "bad"],
  ["B", 7, 1, 7, 9, 2, "good"],
  ["C", 9, 3, 5, 4, 3, "normal"],
  ["D", 1, 4, 9, 2, 4, "bad"]
];

这里没有什么太疯狂的事情-这种自定义数据结构在许多现有应用程序中很常见。但是现在您想在AnyChart中使用此数组。使用许多其他图表库，您将不得不将数据转换为该库可以使用的格式。好吧，有了AnyChart，事情就变得简单得多-看看我们能做什么。首先，将数组加载到数据集中：

var rawData = [
  ["A", 5, 4, 5, 8, 1, "bad"],
  ["B", 7, 1, 7, 9, 2, "good"],
  ["C", 9, 3, 5, 4, 3, "normal"],
  ["D", 1, 4, 9, 2, 4, "bad"]
];

var dataSet = anychart.data.set(rawData);

然后，一旦将数据加载到数据集中，真正的魔力就开始了：您现在可以创建所谓的views 。这些是从其他数据集派生的数据集。

var rawData = [
  ["A", 5, 4, 5, 8, 1, "bad"],
  ["B", 7, 1, 7, 9, 2, "good"],
  ["C", 9, 3, 5, 4, 3, "normal"],
  ["D", 1, 4, 9, 2, 4, "bad"]
];

var dataSet = anychart.data.set(rawData);

var view1 = dataSet.mapAs({x: 0, value: 1});
var view2 = dataSet.mapAs({x: 0, value: 2});
var view3 = dataSet.mapAs({x: 0, high: 3, low: 4});
var view4 = dataSet.mapAs({x: 0, value: 5, meta: 6});

您会注意到，在定义视图时，您将确定原始数组中包括哪些列，以及这些列的名称。然后，您可以使用它们来创建所需的任何一种图表。例如，以下是根据第5列中的自定义数据创建饼图的方法。

注意： AnyChart仅需要x和value字段即可创建饼图，但视图还包含一个meta字段，其中包含第6列中的数据。您可以映射任意数量的可选字段，并根据需要使用它们。例如，这些字段可以包含其他数据，以标签或工具提示的形式显示：

anychart.onDocumentLoad(function() {
  var rawData = [
    ["A", 5, 4, 5, 8, 3, "Bad"],
    ["B", 7, 1, 7, 9, 5, "Good"],
    ["C", 9, 3, 5, 4, 4, "Normal"],
    ["D", 1, 4, 9, 2, 3, "Bad"]
  ];

  var dataSet = anychart.data.set(rawData);
  var view4 = dataSet.mapAs({x: 0, value: 5, meta: 6});

  // create chart
  var chart = anychart.pie(view4);
  chart.title("AnyChart: Pie Chart from Custom Data Set");
  chart.labels().format("{%meta}: {%Value}");
  chart.container("container").draw();
});

这就是我们最终得到的结果：

请参阅CodePen上SitePoint （ @SitePoint ）的数据集中的Pen AnyChart饼图。

注意：您可以将本文中的所有演示作为CodePen集合找到。

具有自定义数据集的多系列组合图

现在，让我们看看如何使用相同的自定义数据来创建在同一图上具有折线图和范围面积图的组合图。由于您现在知道什么是视图，因此本节将非常短。您需要做的就是选择合适的视图并明确创建必要的系列：

anychart.onDocumentLoad(function() {
  var rawData = [
    ["A", 5, 4, 5, 8, 3, "Bad"],
    ["B", 7, 1, 7, 9, 5, "Good"],
    ["C", 9, 3, 5, 4, 4, "Normal"],
    ["D", 1, 4, 9, 2, 3, "Bad"]
  ];

  var dataSet = anychart.data.set(rawData);

  var view1 = dataSet.mapAs({x: 0, value: 1});
  var view2 = dataSet.mapAs({x: 0, value: 2});
  var view3 = dataSet.mapAs({x: 0, high: 3, low: 4});

  // create chart
  var chart = anychart.line();
  // create two line series
  chart.line(view1).name("EUR");
  chart.line(view2).name("USD");
  // create range area series
  chart.line(view2).name("Trend");

  // set title and draw chart
  chart.title("AnyChart: Combined Chart from Data Set");
  chart.container("container").draw();
});

看起来是这样的：

请参阅CodePen上SitePoint （ @SitePoint ）的数据集中的Pen AnyChart组合图表。

实时数据流和过滤

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

免费获得这本书

现在，展示视图和数据集的美丽。为此，我们将创建一个柱形图和一个多折线图，将流数据实时传输到数据集中，并仅接受某些值进入柱形图。听起来复杂吗？真的不是！

anychart.onDocumentLoad(function() {
  var rawData = [
    ["A", 5, 4, 2, 6, 3, "Bad"],
    ["B", 7, 2, 1, 9, 5, "Good"],
    ["C", 8, 3, 2, 9, 4, "Normal"],
    ["D", 1, 4, 1, 4, 3, "Bad"]
  ];

  dataSet = anychart.data.set(rawData);

  var view1 = dataSet.mapAs({ x: 0, value: 1 });
  var view2 = dataSet.mapAs({ x: 0, value: 2 });
  var view3 = dataSet.mapAs({ x: 0, value: 3 });
  var view4 = dataSet.mapAs({ x: 0, value: 4 });
  var view5 = dataSet.mapAs({ x: 0, value: 5 });

  // create chart
  var chart1 = anychart.line();
  // create several line series
  chart1.line(view1).name("EUR");
  chart1.line(view2).name("USD");
  chart1.line(view3).name("YEN");
  chart1.line(view4).name("CNY");

  // create column chart
  // based on filtered view
  // that accepts values of less than 5 only
  var chart2 = anychart.column(
    view5.filter("value", function(v) {
      return v < 5;
    })
  );

  // set title and draw multi-line chart
  chart1.title("Line: Streaming from Data Set");
  chart1.legend(true);
  chart1.container("lineContainer").draw();

  // set title and draw column chart
  chart2.title("Column: Filtering Stream");
  chart2.container("columnContainer").draw();
});

// streaming function
var streamId;
function stream() {
  if (streamId === undefined) {
    streamId = setInterval(function() {
      addValue();
    }, 1000);
  } else {
    clearInterval(streamId);
    streamId = undefined;
  }
}

// function to add new value and remove first one
function addValue() {
  // generate next letter/symbol as argument
  var x = String.fromCharCode(
    dataSet.row(dataSet.getRowsCount() - 1)[0].charCodeAt(0) + 1
  );
  // append row of random values to data set
  dataSet.append([
    x,
    Math.random() * 10,
    Math.random() * 10,
    Math.random() * 10,
    Math.random() * 10,
    Math.random() * 10
  ]);
  // remove first row
  dataSet.remove(0);
}

您会看到我们已经创建了一个自定义数据集和五个派生视图。其中四个按原样用于创建折线，但是在创建柱形图时，我们将应用过滤功能，并且仅将小于5的值放入视图中。然后，我们通过在主数据集中添加和删除行来流传输数据，所有视图自动接收数据并更新图表-无需编码即可实现！

见笔AnyChart的流媒体和过滤由SitePoint（ @SitePoint上） CodePen 。

就数据映射而言，这只是冰山一角！您可以对对象数组和CSV数据执行相同的操作，还可以对，排序，搜索，侦听更改，遍历值以及更改现有行进行排序。在“树图”和“甘特图”中还使用了特殊的分层数据视图，可以搜索和遍历这些视图。

自定义图表可视化

在图表定制方面，AnyChart的用途极为广泛。您几乎可以在任何元素上更改线条样式，填充颜色，使用渐变填充或图像填充。可以使用字符串常量，HEX或RGB表示法或返回这些值之一的函数来设置颜色。该库还提供了许多内置模式，并提供了创建自己的模式的选项。

主题

更改AnyChart图表外观的最简单方法是更改主题。

实际上，您可以创建自己的主题，也可以使用该库随附的主题之一。当前在AnyChart中有17个现成的主题可用：咖啡， 深蓝色 ， 深地球 ， 黑暗魅力 ， 黑暗普罗旺斯 ， 深绿松石 ， 默认主题 ， 浅蓝色 ， 浅地球 ， 浅色魅力 ， 浅普罗旺斯 ， 浅绿松石 ，单色，早晨，粉彩，海， 葡萄酒 。这些主题的文件可以从AnyChart CDN的“ 主题”部分获得。

您可以像这样引用它们：

只需一行即可激活主题：

anychart.theme(anychart.themes.coffee);

让我们以示例的方式使用上一篇文章中的基本图表。

anychart.onDocumentLoad(function() {
  // set theme referenced in scripts section from
  // https://cdn.anychart.com/themes/latest/coffee.min.js
  anychart.theme(anychart.themes.coffee);
  // create chart and set data
  var chart = anychart.column([
    ["Winter", 2],
    ["Spring", 7],
    ["Summer", 6],
    ["Fall", 10]
  ]);
  // set chart title
  chart.title("AnyChart Coffee Theme");
  // set chart container and draw
  chart.container("container").draw();
});

现在，该图表的外观和感觉完全不同。

请参阅CodePen上的SitePoint （ @SitePoint ）的Pen AnyChart Coffee主题。

注意：您可以浏览所有主题，并在AnyChart主题演示页面上查看它们如何与不同的图表类型和系列一起使用。请参考AnyChart文档，以了解如何创建自己的主题并了解其他选项。

染色

如您所见，AnyChart图表库中的颜色元素非常简单。但是还有更多！还可以使用不透明的纯色对形状进行着色，使用径向和线性渐变以及使虚线变为虚线。您可以通过其Web常量名称，十六进制代码或RGB，RGBA，HSL，HSLA值来应用颜色，就像在CSS中一样。

为了在一个功能强大的示例中展示所有这些内容，我想在此过程中重点介绍另一种选择，即可以使用自己的自定义功能为元素着色。在许多数据可视化情况下，例如当您想根据元素的值设置自定义颜色时，这可能会派上用场。让我们在帕累托图表上进行测试。 AnyChart可以根据原始数据构建此图表并计算所需的一切。

anychart.onDocumentReady(function() {

  // create Pareto chart
  var chart = anychart.pareto([
    {x: "Defect 1", value: 19},
    {x: "Defect 2", value: 9},
    {x: "Defect 3", value: 28},
    {x: "Defect 4", value: 87},
    {x: "Defect 5", value: 14},
  ]);

  // set chart title
  chart.title("Pareto Chart: Conditional coloring");

  // set container id and draw
  chart.container("container").draw();
});

但是要说的是，我们要突出显示相对频率小于10％的元素。在这种情况下，我们需要做的就是添加一些着色功能：

// Get Pareto column series
// and configure fill and stroke
var column = chart.getSeriesAt(0);
column.fill(function () {
  if (this.rf < 10) {
    return '#E24B26 0.5'
  } else {
    return this.sourceColor;
  }
});
column.stroke(function () {
  if (this.rf < 10) {
    return {color: anychart.color.darken('#E24B26'), dash:"5 5"};
  } else {
    return this.sourceColor;
  }
});

如示例中所示，我们可以在this关键字的帮助下访问着色函数上下文，然后创建条件并输出所需的任何颜色或线条设置。我们使用具有不透明度的简单十六进制字符串作为颜色： '#E24B26 0.5' 。对于该行，我们使用AnyChart的特殊颜色转换函数计算较深的颜色，并设置适当的破折号参数： {color: anychart.color.darken('#E24B26'), dash:"5 5"} 。

这就是我们的最终结果：

请参阅CodePen上的SitePoint （ @SitePoint ）的Pen AnyChart条件颜色示例。

默认图案填充

AnyChart JavaScript图表库还提供了一种非常灵活的方式来处理图案（图案填充）。首先，您有32种图案填充类型。它们可以安排在您自己的自定义托盘中，并且您可以直接设置要用于特定系列，元素等的托盘。这是单色饼图的代码如下所示：

anychart.onDocumentReady(function() {
  // create a Pie chart and set data
  chart = anychart.pie([
    ["Apple", 2],
    ["Banana", 2],
    ["Orange", 2],
    ["Grape", 2],
    ["Pineapple", 2],
    ["Strawberry", 2],
    ["Pear", 2],
    ["Peach", 2]
  ]);

  // configure chart using chaining calls to shorten sample
  chart.hatchFill(true).fill("white").stroke("Black");
  chart
    .labels()
    .background()
    .enabled(true)
    .fill("Black 1")
    .cornerType("Round")
    .corners("10%");

  // draw a chart
  chart.container("container").draw();
});

我们启用模式填充的唯一操作是chart.hatchFill(true) 。

请参阅CodePen上的SitePoint （ @SitePoint ）的Pen AnyChart默认图案填充示例。

自定义图案填充

AnyChart能够使用来自底层GraphicsJS库的自定义模式。我介绍了这个库，并在SitePoint上的文章中展示了一些非常酷的绘图示例： Introducing GraphicsJS，一个强大的轻量级图形库。 AnyChart由GraphicsJS提供支持的事实可以带来一些非常惊人的结果，但是一张图片却价值一千个单词，因此让我们继续下一个示例。

我们将使用一种在地质学家中非常流行的旧字体-Interdex创建图案。我记得AnyChart的一位客户问我们如何在他的项目中使用它，他很高兴得知它是如此简单。

首先，如果要使用系统上不存在的字体，则需要创建Web字体并在CSS文件中正确引用它。可以在AnyChart CDN上找到我们的Interdex字体的此类文件的示例。我们需要参考它以及所使用的字体管理库和AnyChart图表库：

之后，我们可以继续进行编码：

var fontLoad = new FontFaceObserver("Conv_interdex");

// create chart when font is loaded using
// https://cdnjs.cloudflare.com/ajax/libs/fontfaceobserver/2.0.7/fontfaceobserver.js
fontLoad.load().then(function() {
  anychart.onDocumentReady(function() {
    // enable hatch fill by default and make chart monochrome
    anychart.theme({
      chart: {
        defaultSeriesSettings: {
          base: {
            hatchFill: true,
            fill: "White",
            hoverFill: "White",
            stroke: "Black"
          }
        }
      }
    });

    // create a stage, it is needed to create a custom pattern fill
    stage = anychart.graphics.create("container");

    // create a column chart and set title
    chart = anychart.column();
    chart.title("AnyChart Custom Pattern");
    // set the data
    chart.data([
      ["Jan", 1000, 1200, 1500, 1000, 1200, 1500],
      ["Feb", 1200, 1500, 1600, 1200, 1500, 1600],
      ["Mar", 1800, 1600, 1700, 1800, 1600, 1700],
      ["Apr", 1100, 1300, 1600, 1100, 1300, 1600],
      ["May", 1900, 1900, 1500, 1900, 1900, 1500]
    ]);

    // set custom hatch palette
    // it can be populated with any number of patterns
    chart.hatchFillPalette([
      getPattern("A"),
      getPattern("N"),
      getPattern("Y"),
      getPattern("C")
    ]);

    // set container and draw chart
    chart.container(stage).draw();
  });
});

// function to create patterns
function getPattern(letter) {
  var size = 40;
  // create a text object
  var text = anychart.graphics
    .text()
    .htmlText(
      "" +
        letter +
        ""
    );
  // create a pattern object
  var pattern = stage.pattern(text.getBounds());
  //  add text to a pattern
  pattern.addChild(text);
  return pattern;
}

我已经在注释中包含了所有解释，但总而言之，您可以创建自定义模式，将其排列在自定义模式调色板中，然后将其应用于整个图表。如果您关注的话，您会注意到我们已经利用AnyChart主题机制来设置默认值。

这是最终结果。可爱，我相信您会同意…

请参阅CodePen上的SitePoint （ @SitePoint ）的Pen AnyChart自定义模式示例。

定制系列

本文的最终样本适用于那些需要更大灵活性和自定义能力的用户。尽管AnyChart努力提供越来越多的图表类型，但数据可视化是一个巨大的领域，每个项目都有不同的要求。为了使每个人尽可能地开心（并让他们保持快乐）并提供创建自己选择的可视化效果的方式，AnyChart开放了GraphicsJS的JavaScript绘图库的源代码，还开放了AnyChart JavaScript图表库本身的源代码。

但是，如果您确实希望使用100％自定义图形，则决定分叉源代码时，您将需要做很多工作。例如，自定义可能很麻烦，并且如果AnyChart不接受您的请求请求，则合并将来的版本时可能会遇到问题。

幸运的是，还有第三种选择。使用AnyChart的大多数基本图表类型，您可以覆盖呈现功能并更改图表元素的外观，同时保留AnyChart提供的所有其他功能。

在下面，您将找到一个代码示例，其中显示了如何将广泛使用的范围柱形图（AnyChart图表库中支持）转换为不太常见的樱桃形图（不是）。当您覆盖AnyChart的呈现功能时，要记住的主要事情是，此功能将计算从提供给系列的值中得出的所有内容，并且您应该从具有相同数量值的系列中创建自己的（自定义）系列。

anychart.onDocumentReady(function() {
  // create a chart
  var chart = anychart.cartesian();
  chart.xAxis().title("Month");
  chart.yAxis().title("Cherry price");

  // create a data set
  var data = [
    { x: "Apr", low: 29, high: 37 },
    { x: "May" },
    { x: "Jun", low: 29, high: 47 },
    { x: "Jul", low: 12, high: 27 },
    { x: "Aug", low: 20, high: 33, color: "#ff0000" },
    { x: "Sep", low: 35, high: 44 },
    { x: "Oct", low: 20, high: 31 },
    { x: "Nov", low: 44, high: 51 }
  ];

  // create a range column series
  var series = chart.rangeColumn(data);
  // set a meta field to use as a cherry size
  // series.meta("cherry", 50);
  // set a meta field to use as a stem thickness
  // series.meta("stem", 1);

  // optional: configurable select fill
  series.selectFill("white");

  // call a custom function that changes series rendering
  cherryChartRendering(series);

  // set container id for the chart and initiate chart drawing
  chart.container("container").draw();
});

// custom function to change range column series rendering to
// cherry chart with a special value line markers
function cherryChartRendering(series) {
  // cherry fill color
  series.fill(function() {
    // check if color is set for the point and use it or series color
    color = this.iterator.get("color") || this.sourceColor;
    return anychart.color.lighten(color, 0.25);
  });
  // cherry stroke color
  series.stroke(function() {
    // check if color is set for the point and use it or series color
    color = this.iterator.get("color") || this.sourceColor;
    return anychart.color.darken(color, 0.1);
  });

  // set rendering settings
  series.rendering()// set point function to drawing
  .point(drawer);
}

// custom drawer function to draw a cherry chart
function drawer() {
  // if value is missing - skip drawing
  if (this.missing) return;

  // get cherry size or set default
  var cherry = this.series.meta("cherry") || this.categoryWidth / 15;
  // get stem thickness or set default
  var stem = this.series.meta("stem") || this.categoryWidth / 50;

  // get shapes group
  var shapes = this.shapes || this.getShapesGroup(this.pointState);
  // calculate the left value of the x-axis
  var leftX = this.x - stem / 2;
  // calculate the right value of the x-axis
  var rightX = leftX + stem / 2;

  shapes["path"]
    // resets all 'path' operations
    .clear()
    // draw bulb
    .moveTo(leftX, this.low - cherry)
    .lineTo(leftX, this.high)
    .lineTo(rightX, this.high)
    .lineTo(rightX, this.low - cherry)
    .arcToByEndPoint(leftX, this.low - cherry, cherry, cherry, true, true)
    // close by connecting the last point with the first
    .close();
}

这就是我们的最终结果：

请参阅CodePen上的SitePoint （ @SitePoint ）提供的Pen AnyChart Cherry Cherry图表自定义渲染功能。

结论

我希望您发现对AnyChart的更高级功能的了解很有用，并且为您自己的数据虚拟化提供了很多想法和启发。

如果您还没有尝试过AnyChart，我敦促您尝试一下。我们的最新版本（7.14.0版）添加了八种新的图表类型，五种新的技术指标，Google Spreadsheet数据加载器，选取框和缩放，文本换行以及其他很酷的新功能。

并且，如果您在项目中使用AnyChart，并且对库有任何意见或问题，我很乐意在下面的评论中听到。

有用的链接

AnyChart官方网站
AnyChart文档
- AnyChart快速入门
- AnyChart中的数据
- 数据适配器
- 映射数据集
- 主题
- 色彩
- 模式
- 定制系列
AnyChart API
AnyChart游乐场
GraphicsJS官方网站
关于SitePoint的GraphicsJS文章

翻译自: https://www.sitepoint.com/javascript-charts-custom-data-sets/