0

Javaスクリプトでグラフを描きたい。簡単な例で私の問題を共有しましょう。

Ind vs Aus cricket match.
     X axis- Overs
     Y axis- Runs

両方のチームがそれぞれのオーバーで得点したランを同じグラフに表示したいと考えています。一緒に見せてもいいですか？

あなたの経験は私にとって役に立ちます。助けを願っています。

助けていただければ幸いです...事前に感謝します,,

4

2 に答える 2

2

Google Visualization API を試す:

データテーブルを作成し、さまざまな種類のチャートで視覚化するためのクラスが含まれています。

Google Visualiation Code Playgroundの例:

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'x');
  data.addColumn('number', 'Cats');
  data.addColumn('number', 'Blanket 1');
  data.addColumn('number', 'Blanket 2');
  data.addRow(["A", 1, 1, 0.5]);
  data.addRow(["B", 2, 0.5, 1]);
  data.addRow(["C", 4, 1, 0.5]);
  data.addRow(["D", 8, 0.5, 1]);
  data.addRow(["E", 7, 1, 0.5]);
  data.addRow(["F", 7, 0.5, 1]);
  data.addRow(["G", 8, 1, 0.5]);
  data.addRow(["H", 4, 0.5, 1]);
  data.addRow(["I", 2, 1, 0.5]);
  data.addRow(["J", 3.5, 0.5, 1]);
  data.addRow(["K", 3, 1, 0.5]);
  data.addRow(["L", 3.5, 0.5, 1]);
  data.addRow(["M", 1, 1, 0.5]);
  data.addRow(["N", 1, 0.5, 1]);

  // Create and draw the visualization.
  new google.visualization.LineChart(document.getElementById('visualization')).
      draw(data, {curveType: "function",
                  width: 500, height: 400,
                  vAxis: {maxValue: 10}}
          );
}

これにより、X 軸と Y 軸を含む折れ線グラフが作成されます。これは、実行しようとしていることです。

于 2012-04-04T13:13:07.593 に答える
0

gRaphael is a great choice for charts for web. It uses javascript to produce graphs in SVG and, in old versions of IE, VML, which makes it a great cross-browser starting point - it works in IE6 and above and doesn't need flash. Another good advantage is, using SVG/VML DOM elements controlled by a javascript object means your graph elements can be made highly interactive and manipulated in javascript at any time.

Example code (from doc barchart examples): 

r.hbarchart(10, 250, 300, 220, [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55]]).hover(fin, fout);

That line creates a two-variable bar chart which calls mousein and mouseout callback functions on each element which you could use to show related information e.g., in their example, the exact values. A two variable bar chart is probably a good way to represent two teams' scoring by over for one innings. A graphael dot chart might be a better good option if there are multiple overs and multiple innings - one for each team. There are other chart types supported too - see the demo examples on the main project page above.

于 2012-04-04T13:32:57.310 に答える