不带聚合的Dimple X-Y图表

Question

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

X轴上有时间值的X-Y折线图的代码如下所示。请注意，时间值的间隔不是相等的。Dimple正确定位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();

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