我正在使用dimple.js库绘制多系列折线图。我面临的问题是,将x轴重复值相加并绘制为图形中的单个点。这是我的示例http://jsfiddle.net/geervani/jcow2y4u/8/。在下面的数据中,对于KM 240000,有两个MM值-8和14。应将其绘制为2个不同的点。但是渲染的图表在(22,240000)处只有1点。点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();
谢谢,杰尔瓦尼
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/
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句