绘制多系列凹坑图折线图时测量轴累加值。如何避免

Question

我正在使用 dimple.js 库绘制多系列折线图。我面临的问题是，x 轴重复值被加起来并绘制为图中的一个点。这是我的例子 http://jsfiddle.net/geervani/jcow2y4u/8/。在下面的数据中，对于 KM 240000，有两个 MM 值 - 8 和 14。这应该绘制为 2 个不同的点。但是渲染的图表只有 1 个点在 (22,240000)。第 8 点和第 14 点相加。这怎么能解决。请提出建议。

 var chartdata = [{
        "Tyre": "1-OL",
            "Design": "HDL2+ECO+",
            "Size": "295.0/22.5R55.0",
            "KM": 128000,
            "MM": 22
    }, {
        "Tyre": "1-OL",
            "Design": "HDL2+ECO+",
            "Size": "295.0/22.5R55.0",
            "KM": 145000,
            "MM": 20
    }, {
        "Tyre": "1-OL",
            "Design": "HDL2+ECO+",
            "Size": "295.0/22.5R55.0",
            "KM": 195000,
            "MM": 17
    }, {
        "Tyre": "1-OL",
            "Design": "HDL2+ECO+",
            "Size": "295.0/22.5R55.0",
            "KM": 240000,
            "MM": 8
    }, {
        "Tyre": "1-OL",
            "Design": "HDL2+ECO+",
            "Size": "295.0/22.5R55.0",
            "KM": 240000,
            "MM": 14
    }, {
        "Tyre": "1-OL",
            "Design": "HDL2+ECO+",
            "Size": "295.0/22.5R55.0",
            "KM": 300000,
            "MM": 12
    }, {
        "Tyre": "1-OL",
            "Design": "HDL2+ECO+",
            "Size": "295.0/22.5R55.0",
            "KM": 429117.39,
            "MM": 3
    }];

    var svg = dimple.newSvg("#chartContainer", '100%', '100%');

    // Create and Position a Chart
    var myChart = new dimple.chart(svg, chartdata);
    myChart.setMargins(50, 10, 10, 50);
    //myChart.setBounds(30, '0px', '95%', '100%');

    var x = myChart.addCategoryAxis("x", "KM");
    x.showGridlines = false;
    var y = myChart.addMeasureAxis("y", "MM");
    y.showGridlines = false;
    y.ticks = 5;

    // Min price will be green, middle price yellow and max red
    //myChart.addColorAxis("KM", ["green", "yellow", "red"]);

    // Add a thick line with markers
    myChart.addSeries("Tyre", dimple.plot.bubble);

    var s = myChart.addSeries("Tyre", dimple.plot.line);

    // Add line markers to the line because it looks nice
    s.lineMarkers = true;
    // Draw the chart
    myChart.draw();

谢谢，格尔瓦尼

Answer 1

Dimple 根据您的代码中定义的维度预先聚合您的数据。这意味着您需要某种方式来区分数据中的行，否则它们将被聚合。您应该考虑是什么使一行与另一行不同，并将其捕获到数据中。例如，我假设它们是观察结果并给它们编号：

for (var i = 0; i < chartdata.length; i += 1) {
    chartdata[i]["Observation"] = i;
}

然后在系列数组中引用这个新维度：

var s = myChart.addSeries(["Observation", "Tyre"], dimple.plot.line);

当然，如果您可以包含某种时间值或更有意义的方式来区分一行在现实世界中实际与什么相关，那将是更可取的，但这是这个有效的示例：http://jsfiddle.net/jcow2y4u/11/

绘制多系列凹坑图折线图时测量轴累加值。如何避免

Measure Axis adding up values when multiseries dimple chart line chart is plotted. How to avoid

charts

line

dimple.js