0

我想在 java 脚本中绘制图形。让我用简单的例子分享我的问题。

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

我想在同一张图中显示两支球队在每场比赛中的得分。我可以一起展示它们吗？

你的经验对我有用。希望得到帮助。

将不胜感激...提前谢谢，，

4

2 回答 2

2

试试谷歌可视化 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是 Web 图表的绝佳选择。它使用 javascript 在 SVG 和旧版本的 IE、VML 中生成图形，这使其成为一个很好的跨浏览器起点 - 它可以在 IE6 及更高版本中运行，并且不需要 Flash。另一个好处是，使用由 javascript 对象控制的 SVG/VML DOM 元素意味着您的图形元素可以随时在 javascript 中进行高度交互和操作。

示例代码（来自 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);

该行创建了一个双变量条形图，它在每个元素上调用 mousein 和 mouseout 回调函数，您可以使用这些函数来显示相关信息，例如，在他们的示例中，确切的值。两个变量的条形图可能是表示两支球队在一局比赛中得分的好方法。如果有多个回合和多个局 - 每支球队一个，那么图形点图可能是一个更好的选择。还支持其他图表类型 - 请参阅上面主项目页面上的演示示例。

于 2012-04-04T13:32:57.310 回答