Question

EIRCH的基本图表是用d3实现的，是在一个瘦类的等级系统上实现的。类执行公共任务(如设置比例、轴等)。而单独的图表实现了他们自己的专业绘图例程。

概述

每个基本图表都是为了使用相同的工作流而构建的，下面是一个概述：

1.创建HTML容器

时代自动大小图表，以适应他们的容器。<div style="width: 200px; height: 200px"></div>

2.获取和格式化数据

每种类型的图表都使用一种特定的数据格式(尽管通常是熟悉的)。有关预期的数据格式，请参阅个别图表文档。

3.初始化和渲染情节

使用jQuery方法.epoch若要创建、追加和绘制图表，请执行以下操作：var myChart = $('#myChart').epoch({ type: 'line', data: myData });

4.根据需要更新地块

当数据更改时，只需使用update方法处理图表实例：myChart.update(myNewData);

共同选择

除非另有说明，以下每个图表都有以下共同选择：

名字	描述
axes	哪些轴要显示。 例子： axes: ['top', 'right', 'bottom', 'left']
ticks	在每个轴上显示的蜱数。 例子： { top: 10, right: 5, bottom: 20, left: 5 }
tickFormats	在显示滴答标签时使用什么格式化功能。 例子：tickFormats: { bottom: function(d) { return '$' + d.toFixed(2); } }
domain	为图表设置显式域。 例子： domain: [0, 2*Math.PI]
range	为图表设置显式范围。 例子： range: [-1, 2]
margins	显式边距覆盖图表。 例子： margins: { top: 50, right: 30, bottom: 100, left: 40 }
width	用显式像素值覆盖自动宽度。 例子： width: 320
height	用显式像素值覆盖自动高度。 例子： height: 240

面积图

基本面积图用于绘制多个数据序列。该图表期望数据作为一个层数组，每个层都有自己独立的值系列。首先，让我们看看一些示例数据：

var areaChartData = [
  // The first layer
  {
    label: "Layer 1",
    values: [ {x: 0, y: 100}, {x: 20, y: 1000}, ... ]
  },

  // The second layer
  {
    label: "Layer 2",
    values: [ {x: 0, y: 78}, {x: 20, y: 98}, ... ]
  },

  // Add as many layers as you would like!
];

如您所见，数据被安排为一个层数组。每个层都是一个具有以下属性的对象：

• label-图层名称
• values-一个值数组(每个值具有x和y坐标)

为了获得最好的结果，每个层应该包含相同数量的值，具有相同的值。x坐标。这将允许d3使最好看的图形成为可能。要创建一个系列图，只需包含一个层。

假设您有适当格式的数据，实例化一个新图表是相当容易的。只需在HTML中创建一个容器元素，并使用jQuery绑定来创建、放置和绘制图表：

<div id="areaChart" style="width: 800px; height: 200px"></div>
<script>
  $('#areaChart').epoch({
    type: 'area',
    data: areaChartData
  });
</script>

柱形图

一个多系列分组条形图的实现。条形图对于在离散域上按组显示数据非常有用。首先，让我们看看如何为条形图格式化数据：

var barChartData = [
  // First bar series
  {
    label: 'Series 1',
    values: [
      { x: 'A', y: 30 },
      { x: 'B', y: 10 },
      { x: 'C', y: 12 },
      ...
    ]
  },

  // Second series
  {
    label: 'Series 2',
    values: [
      { x: 'A', y: 20 },
      { x: 'B', y: 39 },
      { x: 'C', y: 8 },
      ...
    ]
  },

  ... // Add as many series as you'd like
];

条形图将创建一组共享类似的条形图。x值数组中每个独立值的值。目前只有分组条形图可用，但我们计划添加堆叠和归一化叠加图表很快就到了！

接下来，让我们看看显示BAR数据所需的标记和脚本：

<div id="barChart" style="width: 300px; height: 100px"></div>
<script>
  $('#barChart').epoch({
    type: 'bar',
    data: barChartData
  });
</script>

水平导向条形图

条形图还通过设置orientation选择'horizontal'。面向水平的图表将显示相互叠加的条形图，如下所示：

备选方案

条形图有以下一组附加选项：

名字	描述
orientation	设置图表的方向。可能是'horizontal'，或'vertical'(默认) 例子： orientation: 'vertical'
padding	设置栏或栏组之间空格的填充(百分比)。 例子： padding: { bar: 0.8, group: 1 }
outerPadding	为栏外空间或栏组设置填充(百分比)。 例子： outsidePadding: { bar: 0.8, group: 1 }

折线图

线图有助于可视化单一或多系列数据时，没有堆叠或阴影。首先，让我们看一看 EIRCH 的线条图所使用的数据格式：

var lineChartData = [
  // The first series
  {
    label: "Series 1",
    values: [ {x: 0, y: 100}, {x: 20, y: 1000}, ... ]
  },

  // The second series
  {
    label: "Series 2",
    values: [ {x: 20, y: 78}, {x: 30, y: 98}, ... ]
  },

  ...
];

注意，数据非常类似于面积图表，但它们不需要覆盖相同的域，每个系列中的条目也不必通过x坐标。

接下来，让我们看看如何使用标记和脚本来实现图表：

<div id="lineChart" style="width: 700px; height: 250px"></div>
<script>
  $('#lineChart').epoch({
    type: 'line',
    data: lineChartData
  });
</script>

饼图

饼图对于显示各种数据点的相对大小非常有用。首先，让我们看一看Epoch饼图实现所使用的数据格式：

var pieData = [
  { label: 'Slice 1', value: 10 },
  { label: 'Slice 2', value: 20 },
  { label: 'Slice 3', value: 40 },
  { label: 'Slice 4', value: 30 }
]

数据本身是表示饼图中的切片的对象数组。这个label参数将用于设置图表中的切片的标签，并且value参数将用于与其他切片相比确定其可视大小。

一旦正确格式化了数据，就可以使用以下标记和脚本轻松地向页面添加图表：

<div id="pie" style="width: 400px; height: 400px"></div>
<script>
  $('#pie').epoch({
    type: 'pie',
    data: pieData
  });
</script>

备选方案

饼图是唯一的基本图表不接受所有常见的选项。以下是初始化饼图时可以使用的完整选项列表：

名字	描述
margin	用定义的像素边缘包围图表。 例子： margin: 30
inner	饼图的内部半径(用于制作甜甜圈图)。 例子： inner: 100
width	用显式像素值覆盖自动宽度。 例子： width: 320
height	用显式像素值覆盖自动高度。 例子： height: 240

散点图

散点图对于可视化统计数据或抽样数据是有用的，希望能揭示模式。首先，让我们看一看散点图所使用的数据格式：

var scatterData = [
  // The first group
  {
    label: "Group 1",
    values: [ {x: 5, y: 100}, {x: 93, y: 1424}, ... ]
  },

  // The second group
  {
    label: "Group 2",
    values: [ {x: -52, y: 78}, {x: 120, y: 17}, ... ]
  },

  ...
];

数据由一个包含“组”点的数组组成。组不必有相同数量的值，也不必匹配相同的值。x协调域。

接下来，让我们看看将情节添加到页面所需的标记和脚本：

<div id="scatter" style="width: 500px; height: 500px"></div>
<script>
  $('#scatter').epoch({
    type: 'scatter',
    data: scatterData
  });
</script>

气泡图

散点图还可以通过设置r值为序列中的每个数据点。下面是如何格式化这些数据的示例：

var bubbleData = [
  {
    label: 'Group 1',
    values: [
      {x: 10, y: 40, r: 2},
      {x: 48, y: 17, r: 5},
      {x: 9, y: 33, r: 10}
      ...
    ]
  }
];

备选方案

名字	描述
radius	图中“点”的默认半径(以像素为单位)。 例子： radius: 4.5