我可以从此表创建一个Javascript图表吗？

问题描述：

我刚开始编程与Highcharts，如果有可能，我们将根据此表中的任何类型的折线图的奇迹：http://www2.nve.no/h/hd/plotreal/Q/0027.00025.000/knekkpunkt.html 我可以从此表创建一个Javascript图表吗？

表更新每半小时，我想这会相应地更新线路图形程序。

我的问题是，我不知道这是可能的。表数据是远程的，在我无权访问的服务器上。尽管如此，这些数据是公开和公开的。

将不胜感激的一些帮助！

你能更新你的链接，这似乎不工作？ –

它应该工作，但我上传数据在我的服务器上：http://fluefiske.net/dok/graf.html –

答

你想要签出的一个伟大的开源项目是D3.js。这是一个功能丰富的库，用于从原始数据生成复杂的可视化（使用SVG元素和DOM）。下面是我用你的数据的一个片段，是由D3供电做了一个演示：

http://jsfiddle.net/2s6Y3/

//Define two functions that will 'map' x- and y-values into their respective axis domain 
var x_scale_fn = d3.scale.linear().domain([Math.min.apply(null, times), Math.max.apply(null, times)]).range([0, width]); 
var y_scale_fn = d3.scale.linear().domain([Math.max.apply(null, levels), Math.min.apply(null, levels)]).range([0, height]); 

//Create a 'line' object that can read our records and turn them into x-y coordinates 
var line = d3.svg.line() 
.x_scale_fn(function(d, i) { return x(times[i]); }) 
.y_scale_fn(function(d, i) { return y(levels[i]); }); 

//Create a new SVG element (our chart) and give it some basic attributes 
var graph = d3.select(".chart").append("svg:svg") 
    .attr("width", width + margins[1] + margins[3]) 
    .attr("height", height + margins[0] + margins[2]) 
    .append("svg:g") 
    .attr("transform", "translate(" + margins[3] + ", " + margins[0] + ")"); 

//Create our chart axes 
var x_axis = d3.svg.axis().scale(x), 
    y_axis = d3.svg.axis().scale(y).orient("left"); 

//Render the x-axis 
graph.append("svg:g") 
    .attr("transform", "translate(0," + height + ")") 
    .attr("class", "x axis") 
    .call(x_axis) 
    .selectAll("text") 
.attr("transform", function(d) { return "rotate(45deg)"; }); 

//Render the y-axs 
graph.append("svg:g") 
    .attr("transform", "translate(-25,0)") 
    .attr("class", "y axis") 
    .call(y_axis); 

//Render our data (line) onto the chart 
graph.append("svg:path").attr("d", line(data));

如果你想创建一个项目，提供了一个持久的，最多最新的可视化水数据，你需要设置一个刮板来定期从页面读取数据并将其格式化为D3（即JSON）。这可以用许多不同的工具完成，但是一个建议是使用Python和urllib2。

好吧，这是不幸的方式在我的编码技能。但是，我对如何向前迈进有了一个想法，也许可以了解我需要的工作。 –

如果您不熟悉语法（库大量使用方法链，作为惯例），D3代码有点奇怪，并且需要一些关于SVG模型的知识。如果您好奇，我可以详细了解上述任何代码。不过，如果你认为面临类似问题的其他程序员会觉得这很有帮助，请接受它作为答案！ –

答

这将是可能的，但没有乐趣。这些数据都是一个大的预先格式化的字符串。访问这些值的表格将使您的工作更轻松。否则，您需要考虑编写一些RegEx来解析该怪物节点的文本。

我明白了，那么这对我来说不是一项任务。很高兴为您提供帮助！ –

我的荣幸。 :) – Sneagan

答

您的链接似乎不工作。

如果你是在谈论一个HTML表格，看看演示在这里：

http://www.highcharts.com/demo/column-parsed

问题是此数据每小时更新一次，并由除我之外的其他人托管。 –

更新频率不是问题。无论您为解析此数据而创建的内容都可以在每次加载页面时运行，并始终保持最新状态。该页面是数据的*源*，还是您正在显示它的页面？ – jlbriggs

答

感谢所有帮助，这让我意识到，我的技术不加起来才能使其发挥作用。

我可以从此表创建一个Javascript图表吗？

相关推荐