javascript – dimplejs中的多系列

我正在修补dimplejs中的多系列图表,并且对多轴逻辑有点困惑.

有以下数据：

var data = [
  {"Month":"01/2013","Revenue":2000,"Profit":2000,"Units":4},{"Month":"02/2013","Revenue":3201,"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轴上.

通过下面的代码,我可以设法显示3系列.但是Profit系列与收入系列并没有真正在同一个轴上,整个事情似乎更像是一个黑客而不是一个合适的解决方案.

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,y2]);
var y3 = chart.addMeasureAxis("y","Profit");
chart.addSeries("null",y3]);

我想我的逻辑可能是错误的如何正确地玩系列.任何帮助都会很棒.

非常感谢,
泽维尔

完整代码：

var svg = dimple.newSvg("body",800,400);

var data = [
    {"Month":"01/2013","Units":4}
]

var chart = new dimple.chart(svg,y3]);

x.dateParseFormat = "%m/%Y";
x.addOrderRule("Date");

chart.draw();

解决方法

编辑：

从版本2开始不再需要.现在可以使用composite axes.

原版的：

我在这里看到问题,问题不是多轴,而是试图针对单个轴绘制多个度量,而Dimple还没有真正支持.我担心我现在能做的最好的事情是一些数据黑客攻击：

<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",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,"Revenue/Profit":3201,"Revenue/Profit":1940,"Revenue/Profit":2500,"Revenue/Profit":800,{"Month":"01/2013","Metric":"Profit","Units":0},"Revenue/Profit":14000,"Revenue/Profit":3200,"Revenue/Profit":1200,"Units":0}
      ];

      var chart = new dimple.chart(svg,data);
      chart.setBounds(60,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",y2]);
      // Use a simple line by metric for the other measures
      var lines = chart.addSeries("Metric",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",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,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>

这是目前的一个限制,但我刚才有一个非常好的实现的想法,我可以做这样的复合轴添加适当的支持.希望在不久的将来,这将是可能的.

祝好运

约翰

javascript – dimplejs中的多系列

解决方法

相关文章