Question

我刚开始使用Highcharts进行编程，并想知道是否可以根据此表获得任何类型的折线图：http://www2.nve.no/h/hd/plotreal/Q/0027.00025.000/knekkpunkt.html

该表每半小时更新一次，我想编制一个相应更新的折线图。

我的问题是我不知道这是否可行。表数据是远程的，在我无法访问的服务器上。不过，这些数据是公开和公开的。

会感激一些帮助！

Answer 1

这是可能的，但根本不好玩。这些数据都是一个预先格式化的大字符串。访问这些值的表将使您更容易。否则，你需要考虑编写一些RegEx来解析那个怪物节点的文本。

Answer 2

您想要查看的一个很棒的开源项目是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。

Answer 3

您的链接似乎无法正常工作。

如果您正在谈论HTML表格，请在此处查看演示：

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

Answer 4

感谢所有的帮助，这让我意识到我的技能并没有达到使这项工作成功所需的条件。

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

4 个答案: