Question

使用Dimple，我想创建一个带有数字X-Y数据点的简单折线图。我对y轴使用addMeasureAxis（）。如果我对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>

以下是＆＃34; xval＆＃34;的类似代码是数字的，这导致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将不再需要组列，因此您可以执行此操作以获得完全相同的结果，但我担心仍然需要密钥：

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();

没有聚合的凹坑X-Y图表

1 个答案: