Charts 无聚合的凹坑X-Y图

使用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>

var svg=dimple.newSvg（“body”，800600）；
风险值数据=[
{“xval”：“12:00”，“yval”：20}，
{“xval”：“13:00”，“yval”：30}，
{“xval”：“14:00”，“yval”：25}，
{“xval”：“16:00”，“yval”：50}
];
var图表=新的酒窝图表（svg，数据）；
chart.addTimeAxis（“x”、“xval”、“H:%M”、“H:%M”）；
图.添加测量轴（“y”、“yval”）；
chart.addSeries（空、凹陷、绘图、直线）；
chart.draw（）；

这里有一个类似的代码，“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>

var svg=dimple.newSvg（“body”，800600）；
风险值数据=[
{“xval”：12，“yval”：20}，
{“xval”：13，“yval”：30}，
{“xval”：14，“yval”：25}，
{“xval”：16，“yval”：50}
];
var图表=新的酒窝图表（svg，数据）；
图.添加分类轴（“x”、“xval”）；
图.添加测量轴（“y”、“yval”）；
chart.addSeries（空、凹陷、绘图、直线）；
chart.draw（）；

恐怕您需要在数据中添加一个关键维度和一个分组维度，并按如下方式绘制线：

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

---

谢谢你，约翰。酒窝很棒。按照v2的要求添加一个唯一值的字段就可以了，我看到它很快就会可用。一个后续问题：您是否考虑过支持unix时间（整数）和/或朱利安日（浮点）格式的日期/时间值？Dimple支持非常接近unix时间的内容。如果将null传递给输入格式参数，则支持从epoch开始的毫秒（而我认为Unix时间通常是从epoch开始的秒）。我必须说，我从来没有理由使用朱利安时间，但是我想把朱利安时间转换成Unix时间将是一个相当简单的转换。当我需要亚秒分辨率时，我使用了Julian day而不是Unix time，但我更喜欢整数，而且转换很简单。再次感谢。嗨，约翰。我尝试将null传递给addTimeAxis（）的输入格式参数，但似乎不太有效。在某些情况下，我会得到如此多的轴刻度，以致于数据无法读取，而在其他情况下，我将一个也看不到。如果您有如何使用此功能的示例，请告诉我。再次感谢您的帮助。您正在使用chart.addTimeAxis（）吗？听起来像是在使用类别轴，它将为每个不同的值绘制一个点。