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

谢谢， Geervani

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/

测量轴在绘制多边形凹坑图线图时累加值。怎么避免

1 个答案: