多系列在dimplejs [英] Multi-series in dimplejs
问题描述
我在dimplejs中修改了多系列图表，并且遇到了多轴逻辑。
I am tinkering with a multi-series chart in dimplejs and got a bit stuck with the multi axis logic.
使用以下数据：
var data = [
{"Month":"01/2013", "Revenue":2000, "Profit":2000, "Units":4},
{"Month":"02/2013", "Revenue":3201, "Profit":2000, "Units":3},
{"Month":"03/2013", "Revenue":1940, "Profit":14000, "Units":5},
{"Month":"04/2013", "Revenue":2500, "Profit":3200, "Units":1},
{"Month":"05/2013", "Revenue":800, "Profit":1200, "Units":4}
]
我尝试获得一个图表，按月，我的收入和我的利润在同一y轴和我的单位在副y轴。
I try to get a chart showing, by months, my revenue and my profit on the same y axis and my units on a secondary y axis.
使用下面的代码，我可以管理显示3系列。但是利润系列并不像收入一样，而且整个事情似乎更像一个黑客，而不是一个合适的解决方案。
With the code below, I could manage to display the 3 series. But the Profit series isn't really on the same axis as the Revenue one, and the whole thing seems more like a hack than a proper solution.
var chart = new dimple.chart(svg, data);
chart.setBounds(60,20,680,330);
var x = chart.addCategoryAxis("x", "Month");
var y1 = chart.addMeasureAxis("y", "Revenue");
chart.addSeries("null", dimple.plot.line, [x,y1]);
var y2 = chart.addMeasureAxis("y", "Units");
chart.addSeries("null", dimple.plot.bar, [x,y2]);
var y3 = chart.addMeasureAxis("y", "Profit");
chart.addSeries("null", dimple.plot.line, [x,y3]);
我想我的逻辑可能是错误的，如何正确地玩系列。任何帮助将是巨大的。
I guess my logic might be wrong with how to rightly play with series. Any help would be great.
非常感谢
Xavier
Thanks a lot, Xavier
完整代码： p>
Full code:
var svg = dimple.newSvg("body", 800, 400);
var data = [
{"Month":"01/2013", "Revenue":2000, "Profit":2000, "Units":4},
{"Month":"02/2013", "Revenue":3201, "Profit":2000, "Units":3},
{"Month":"03/2013", "Revenue":1940, "Profit":14000, "Units":5},
{"Month":"04/2013", "Revenue":2500, "Profit":3200, "Units":1},
{"Month":"05/2013", "Revenue":800, "Profit":1200, "Units":4}
]
var chart = new dimple.chart(svg, data);
chart.setBounds(60,20,680,330);
var x = chart.addCategoryAxis("x", "Month");
var y1 = chart.addMeasureAxis("y", "Revenue");
chart.addSeries("null", dimple.plot.line, [x,y1]);
var y2 = chart.addMeasureAxis("y", "Units");
chart.addSeries("null", dimple.plot.bar, [x,y2]);
var y3 = chart.addMeasureAxis("y", "Profit");
chart.addSeries("null", dimple.plot.line, [x,y3]);
x.dateParseFormat = "%m/%Y";
x.addOrderRule("Date");
chart.draw();
推荐答案
编辑：
从版本2开始不再需要这个选项。您现在可以使用复合轴。
This is no longer required since version 2. You can now use composite axes.
ORIGINAL：
我在这里遇到问题，问题是n有多个轴，它是试图绘制多个措施对一个单一的轴Dimple还不真正支持。恐怕我现在可以做的最好的是有点数据黑客：
I see the problem here, the issue isn't with multiple axes, it is with trying to draw multiple measures against a single axis which Dimple doesn't really support yet. I'm afraid the best I can do for now is a bit of a data hack:
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 800, 400);
// Data hack required to get revenue and profit on the same axis, units are
// arbitrarily allocated to revenue but the values will be summed by date
var data = [
{"Month":"01/2013", "Metric":"Revenue", "Revenue/Profit":2000, "Units":4},
{"Month":"02/2013", "Metric":"Revenue", "Revenue/Profit":3201, "Units":3},
{"Month":"03/2013", "Metric":"Revenue", "Revenue/Profit":1940, "Units":5},
{"Month":"04/2013", "Metric":"Revenue", "Revenue/Profit":2500, "Units":1},
{"Month":"05/2013", "Metric":"Revenue", "Revenue/Profit":800, "Units":4},
{"Month":"01/2013", "Metric":"Profit", "Revenue/Profit":2000, "Units":0},
{"Month":"02/2013", "Metric":"Profit", "Revenue/Profit":2000, "Units":0},
{"Month":"03/2013", "Metric":"Profit", "Revenue/Profit":14000, "Units":0},
{"Month":"04/2013", "Metric":"Profit", "Revenue/Profit":3200, "Units":0},
{"Month":"05/2013", "Metric":"Profit", "Revenue/Profit":1200, "Units":0}
];
var chart = new dimple.chart(svg, data);
chart.setBounds(60,20,680,330);
// Add your x axis - nothing unusual here
var x = chart.addCategoryAxis("x", "Month");
// First y axis is the combination axis for revenue and profit
var y1 = chart.addMeasureAxis("y", "Revenue/Profit");
// Second is the units only
var y2 = chart.addMeasureAxis("y", "Units");
// Plot the bars first - the order of series determines their dom position
// from back to front, this means bars are at the back. It's important
// to note that the string here "Unit Sales" is NOT in the data. Any string
// not in the data is just used to apply a label which can be used for colouring
// as it is here and will also appear in tool tips
var bars = chart.addSeries("Unit Sales", dimple.plot.bar, [x,y2]);
// Use a simple line by metric for the other measures
var lines = chart.addSeries("Metric", dimple.plot.line, [x,y1]);
// Do a bit of styling to make it look nicer
lines.lineMarkers = true;
bars.barGap = 0.5;
// Colour the bars manually so they don't overwhelm the lines
chart.assignColor("Unit Sales", "black", "black", 0.15);
x.dateParseFormat = "%m/%Y";
x.addOrderRule("Date");
// Here's how you add a legend for just one series. Excluding the last parameter
// will include every series or an array of series can be passed to select more than
// one
chart.addLegend(60, 5, 680, 10, "right", lines);
chart.draw();
// Once Draw is called, this just changes the number format in the tooltips which for these particular
// numbers is a little too heavily rounded. I assume your real data isn't like this
// so you probably won't want this line, but it's a useful tip anyway!
y1.tickFormat = ",d";
</script>
</div>
这是一个有限的限制，但我只是想了一个很好的实现我可以做到像这样的复合轴添加适当的支持。希望在不久的将来是可能的。
This is currently a bit of a limitation but I've just had an idea for a really good implementation I can do to add proper support for composite axes like this. Hopefully that will be possible in the not too distant future.
祝你好运
John
这篇关于多系列在dimplejs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
