没有聚合的酒窝 X-Y 图表

Question

使用 Dimple，我想创建一个带有数字 X-Y 数据点的简单折线图。我使用 addMeasureAxis() 作为 Y 轴。如果我对 X 使用 addCategoryAxis()，如果所有 X 都是唯一的，我会为每个 X 值获得一个数据点，否则，dimple 将为 X 的类似值聚合。如果我再次使用 addMeasureAxis()，Dimple 将聚合，这次是求和。如果我将 X 值修改为时间 (hh:mm) 并使用 addTimeAxis()，dimple 会将每个 X 值视为时间，并将正确放置数据点。有没有办法用任意比例的数字 X 值创建一个类似的图表？我不确定，但我可能会问 Dimple 是否可以创建不聚合 X 值的图表。

在 X 轴上带有时间值的 X-Y 折线图的代码如下所示。请注意，时间值的间距不相等。酒窝正确定位 X-Y 点。

  <script type="text/javascript">
    var svg = dimple.newSvg("body", 800, 600);
    var data = [
      { "xval":"12:00", "yval":20 },
      { "xval":"13:00", "yval":30 },
      { "xval":"14:00", "yval":25 },
      { "xval":"16:00", "yval":50 }
    ];
    var chart = new dimple.chart(svg, data);
    chart.addTimeAxis("x", "xval", "%H:%M", "%H:%M" );
    chart.addMeasureAxis("y", "yval");
    chart.addSeries(null, dimple.plot.line);
    chart.draw();
  </script>

这是类似的代码，其中“xval”为数字，产生 4 个数据点，但 X 值 14 和 16 之间没有所需的间距。

  <script type="text/javascript">
    var svg = dimple.newSvg("body", 800, 600);
    var data = [
      { "xval":12, "yval":20 },
      { "xval":13, "yval":30 },
      { "xval":14, "yval":25 },
      { "xval":16, "yval":50 }
    ];
    var chart = new dimple.chart(svg, data);
    chart.addCategoryAxis("x", "xval" );
    chart.addMeasureAxis("y", "yval");
    chart.addSeries(null, dimple.plot.line);
    chart.draw();
  </script>

Answer 1

恐怕您需要在数据中添加一个关键维度和一个分组维度，然后像这样画线：

var svg = dimple.newSvg("body", 800, 600);
var data = [
  { "key": 1, "group": "a", "xval":12, "yval":20 },
  { "key": 2, "group": "a", "xval":13, "yval":30 },
  { "key": 3, "group": "a", "xval":14, "yval":25 },
  { "key": 4, "group": "a", "xval":16, "yval":50 }
];
var chart = new dimple.chart(svg, data);
chart.addCategoryAxis("x", "xval" );
chart.addMeasureAxis("y", "yval");
chart.addSeries(["key", "group"], dimple.plot.line);
chart.draw();

dimple 的第 2 版将不再需要 group 列，因此您可以这样做以获得完全相同的结果，但恐怕仍然需要密钥：

var svg = dimple.newSvg("body", 800, 600);
var data = [
  { "key": 1, "xval":12, "yval":20 },
  { "key": 2, "xval":13, "yval":30 },
  { "key": 3, "xval":14, "yval":25 },
  { "key": 4, "xval":16, "yval":50 }
];
var chart = new dimple.chart(svg, data);
chart.addCategoryAxis("x", "xval" );
chart.addMeasureAxis("y", "yval");
chart.addSeries(["key", "a"], dimple.plot.line);
chart.draw();

如果您知道 x 或 y 值在您的数据集中是唯一的，那么您可以使用其中一个作为键。因此，例如，如果 x 值是唯一的，则以下内容适用于版本 2：

var svg = dimple.newSvg("body", 800, 600);
var data = [
  { "xval":12, "yval":20 },
  { "xval":13, "yval":30 },
  { "xval":14, "yval":25 },
  { "xval":16, "yval":50 }
];
var chart = new dimple.chart(svg, data);
chart.addCategoryAxis("x", "xval" );
chart.addMeasureAxis("y", "yval");
chart.addSeries(["xval", "a"], dimple.plot.line);
chart.draw();