javascript - 如何在javascript中绘制图形？

Question

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

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

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

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

非常感谢您的帮助...提前致谢，，

Answer 1

尝试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 轴的折线图，这正是您想要做的。