有没有办法在不使用PHP的情况下将数据加载到Highstock?

时间:2013-02-15 21:08:26

标签: highcharts highstock

我一直在抨击我的头三天尝试将所有三种方法加载到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来基于此。有人请帮忙。

2 个答案:

答案 0 :(得分:3)

看看docs,有关于如何操作的一些演示和解释。

首先,创建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);
});

here is the result

答案 1 :(得分: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/

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