Измерение Axis суммирует значения, когда построена диаграмма линейных диаграмм на основе многосерийных диаграмм. Как избежать

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/