7

私は、dimplejs でマルチシリーズ チャートをいじっていて、多軸ロジックに少し行き詰まりました。

次のデータを使用します。

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 軸に、単位を 2 番目の y 軸に、月ごとに示すグラフを取得しようとしています。

以下のコードで、なんとか 3 シリーズを表示できました。しかし、利益系列は実際には収益系列と同じ軸上にあるわけではなく、全体が適切な解決策というよりハックのように見えます.

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

シリーズを正しくプレイする方法について、私の論理が間違っている可能性があると思います。どんな助けでも素晴らしいでしょう。

どうもありがとう、ザビエル

完全なコード:

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

1 に答える 1

11

編集：

これは、バージョン 2 以降は不要になりました。複合軸を使用できるようになりました。

オリジナル：

問題はここにあります。問題は複数の軸ではなく、ディンプルがまだ実際にサポートしていない単一の軸に対して複数のメジャーを描画しようとすることです。申し訳ありませんが、現時点でできる最善のことは、ちょっとしたデータ ハックです。

<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>

これは現在少し制限されていますが、このような複合軸の適切なサポートを追加するために実行できる本当に優れた実装のアイデアがありました。そう遠くない将来にそれが可能になることを願っています。

幸運を

ジョン

于 2013-09-04T22:35:48.637 に答える