2

3 天来,我一直在努力尝试将数据加载到 Highstock 图表中的所有三种方法。有没有办法在不使用 PHP 的情况下导入数据?我在没有安装 PHP 的 IIS 服务器上。

当我使用指向http://www.highcharts.com/samples/data/jsonp.php的 $j.getJSON() 方法时, 它工作正常。但是,当我开始尝试添加自己的数据时(我尝试了 CSV 和 XML),我可以通过 firebug 控制台看到一切运行都没有问题,但我得到了一个奇怪的结果。

http://i.imgur.com/qj5y8bM.png

我可以获取一个 Stockchart 图表的样本(3 个绘图点)吗?我能找到的所有样本都是针对 Highchart Barchart 的。这与我使用 StockChart 所做的完全不同。请,我需要一个示例 CSV 和示例 JSON 来作为基础。有人请帮忙。

4

2 回答 2

3

看看文档,有一些演示和说明如何做到这一点。

首先,创建 csv。

Categories,Apples,Pears,Oranges,Bananas
John,8,4,6,5
Jane,3,4,2,3
Joe,86,76,79,77
Janet,3,16,13,15

其次,定义基本图表选项。

var options = {
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'column'
    },
    title: {
        text: 'Fruit Consumption'
    },
    xAxis: {
        categories: []
    },
    yAxis: {
        title: {
            text: 'Units'
        }
    },
    series: []
};

第三,处理数据。

$.get('data.csv', function(data) {
    // Split the lines
    var lines = data.split('\n');

    // Iterate over the lines and add categories or series
    $.each(lines, function(lineNo, line) {
        var items = line.split(',');

        // header line containes categories
        if (lineNo == 0) {
            $.each(items, function(itemNo, item) {
                if (itemNo > 0) options.xAxis.categories.push(item);
            });
        }

        // the rest of the lines contain data with their name in the first position
        else {
            var series = {
                data: []
            };
            $.each(items, function(itemNo, item) {
                if (itemNo == 0) {
                    series.name = item;
                } else {
                    series.data.push(parseFloat(item));
                }
            });

            options.series.push(series);

        }

    });

    // Create the chart
    var chart = new Highcharts.Chart(options);
});

是结果

于 2013-02-15T23:36:52.150 回答
0

您应该能够使用数组或命名值对象将数据加载到 Highcharts/Highstock 对象中。highcharts.com 上的 PHP 示例 URL 返回 Highcharts/Highstock 可以理解的 JSON 数据,但您可以使用任何返回 JSON 数据的数据源。

例如,下面是一些使用简单数组存储系列数据的代码:

$(function() {
    window.chart = new Highcharts.StockChart({
        chart : {
            renderTo : 'container'
        },
        title : {
            text : 'My chart'
        },
        series : [{
            name : 'My Series',
            data : [
                [Date.UTC(2006, 0, 29, 0, 0, 0), 30.14],
                [Date.UTC(2006, 0, 29, 1, 0, 0), 34.76],
                [Date.UTC(2006, 0, 29, 2, 0, 0), 34.34],
                [Date.UTC(2006, 0, 29, 3, 0, 0), 33.9]
            ]
        }]
    });
});

这是一个现场样本:http: //jsfiddle.net/fF9Ru/1/

如果您有现有的数据源,请发布它返回的数据示例。如果数据格式不正确,图表可能无法呈现。

于 2013-02-15T22:27:32.080 回答