0

我正在将 Flash 转换为 html5 交互式或动态图形，这样用户将在左侧的输入字段中输入值，然后它将在右侧显示图形结果。我正在寻找可以复制和更改变量或进行一些修改的代码资源。太感谢了！

http://www.learner.org/series/econusa/interactivelabs/graphing-lab_moose-synthesizer-co/

4

2 回答 2

0

好吧，您几乎可以使用任何图表库来实现此目的，其中大多数都支持动态数据输入。我使用amCharts.com做了一个这个任务的例子。你会有一个漂亮的、可滚动的 XY 图表：http: //jsfiddle.net/amcharts/6Eb53/

完整来源：

var chart;
AmCharts.ready(function() {
  // XY CHART
  chart = new AmCharts.AmXYChart();
  chart.pathToImages = "http://www.amcharts.com/lib/images/";
  chart.marginRight = 0;
  chart.marginTop = 0;    
  chart.dataProvider = [];
  chart.autoMarginOffset = 0;
  // AXES
  // X
  var xAxis = new AmCharts.ValueAxis();
  xAxis.position = "bottom";
  xAxis.axisAlpha = 0;
  xAxis.autoGridCount = true;
  chart.addValueAxis(xAxis);

  // Y
  var yAxis = new AmCharts.ValueAxis();
  yAxis.position = "left";
  yAxis.axisAlpha = 0;
  yAxis.autoGridCount = true;
  chart.addValueAxis(yAxis);

  // graph
  var graph = new AmCharts.AmGraph();
  graph.yField = "value1";
  graph.xField = "x";
  chart.addGraph(graph);

  // CURSOR
  var chartCursor = new AmCharts.ChartCursor();
  chart.addChartCursor(chartCursor);

  // SCROLLBAR
  var chartScrollbar = new AmCharts.ChartScrollbar();
  chart.addChartScrollbar(chartScrollbar);

  // WRITE                                                
  chart.write("chartdiv");
});

function generateData(){
  var dataProvider = [];
  for(var i = 1; i < 7; i++)
  {
    var value = Number(document.getElementById("input"+i).value);
    dataProvider.push({x:i, value1:value});
  }
  chart.dataProvider = dataProvider;
  chart.validateData();    
}

免责声明：我是 amCharts 库的作者。

于 2013-08-15T07:17:34.333 回答
0

好像你需要 d3.js（一个新的 javascript 库）
这里有一些例子http://bl.ocks.org/mbostock和https://github.com/mbostock/d3/wiki/Gallery of graphs，你可以使用
编辑：
不，你可以使用 d3 来 检查它ht​​tp: //mbostock.github.io/d3/tutorial/circle.html 我相信你可以使用简单的 jquery/javascript 来绑定或检索值. 我建议使用 d3，因为这是用于图形和所有内容的最佳 javascript 库。

于 2013-08-14T17:22:24.883 回答