JSON, HighCharts/HighStock, DBSlayer - 数据展示

Question

我有一个 MySQL 数据库，其中包含一些价格数据，我想使用 HighCharts/HighStock 显示，但我不确定如何实际从 MySQL 获取这些数据（通过 DBslayer 作为 JSON 层）并显示在高图表中（我在他们的网站上找到的示例没有帮助，并且到处搜索也没有好的 tuts）。

所以基本上系统看起来像这样：

MySQL <---> DBSlayer Service <---> JSON Requests to DBSlayer <---> Web page with charts - send query to DBSLayer

DBSlayer 查询的 MySQL 视图如下所示：

DATE TIME | Symbol1 | Price 1 | Symbol2 | Price 2 | Price3
2011-09-01| ABC     | 12.3    | XYZ     | 67.8    | 0.0852

或者更好的例子是从查询到 DBSlayer 返回的 JSON：

  {"RESULT" : {"HEADER" : ["id" , , "authorID" , "msgDate" , "obj_obj" , "obj_subj" , "obj_diff" , "subj_pos" , "subj_neg" , "subj_diff" , "pos_lex" , "neg_lex" ] , 
    "ROWS" : [["4e0f1c393bfbb6aa4b7278c2" , "27" , "2011-06-30 13:59:47" , 0.0275171 , 0.972483 , -0.944966 , 0.993814 , 0.00618577 , 0.987628 , 1 , 0 ] ,
     ["4e0f1c393bfbb6aa4b7278c3" , "36324" , "2011-06-30 13:59:31" ,  0.364953 , 0.635047 , -0.270095 , 0.0319281 , 0.968072 , -0.936144 , 3 , 1 ] ,
     ["4e0f1c393bfbb6aa4b7278c4" , "12134" , "2011-06-30 13:59:28" ,  0.0112589 , 0.988741 , -0.977482 , 0.857735 , 0.142265 , 0.715469 , 1 , 1 ] ] ,
     "TYPES" : ["MYSQL_TYPE_VAR_STRING" , "MYSQL_TYPE_VAR_STRING" , "MYSQL_TYPE_DATETIME" , "MYSQL_TYPE_DOUBLE" , "MYSQL_TYPE_DOUBLE" , "MYSQL_TYPE_DOUBLE" , "MYSQL_TYPE_DOUBLE" , "MYSQL_TYPE_DOUBLE" , "MYSQL_TYPE_DOUBLE" , "MYSQL_TYPE_DOUBLE" , "MYSQL_TYPE_LONG" } , "SERVER" : "db-webPrices"}

我应该如何将它部署到 High Charts？我是否应该首先使用 Node.js 来包装查询（DBSlayer 库中有 Node.js，但是它们不适用于最新版本的 Node.js。

我将如何使用 JQuery 来获取这样的 HighStock 图表的数据和格式：http://www.highcharts.com/stock/demo/multiple-series/gray

使用 CSV 文件作为数据源的基本 HighCharts 演示如下所示：

    $(function() {
        var seriesOptions = [],
            yAxisOptions = [],
            seriesCounter = 0,
            names = ['DJI', 'SENTIMENT', 'GOOG', 'GS', 'SENTIMENT-Z', 'DJI-Z'],
            colors = Highcharts.getOptions().colors;

        $.each(names, function(i, name) {

            $.get(name +'.csv', function(csv, state, xhr) {

                // inconsistency
                if (typeof csv != 'string') {
                    csv = xhr.responseText;
                } 

                // parse the CSV data
                var data = [], header, comment = /^#/, x;

                $.each(csv.split('\n'), function(i, line){
                    if (!comment.test(line)) {
                        if (!header) {
                            header = line;
                        }
                        else {
                            var point = line.split(';'), date = point[0].split('-');

                            x = Date.UTC(date[2], date[1] - 1, date[0]);

                            if (point.length > 1) {
                                // use point[4], the close value
                                data.push([
                                    x, 
                                    parseFloat(point[4])
                                ]);
                            }
                        }
                    }
                });

                seriesOptions[i] = {
                    name: name,
                    data: data,
                    yAxis: i
                };

                // create one y axis for each series in order to be able to compare them
                yAxisOptions[i] = {
                    alternateGridColor: null,
                    gridLineWidth: i ? 0 : 1, // only grid lines for the first series
                    opposite: i ? true : false,
                    minorGridLineWidth: 0,
                    title: {
                        text: name,
                        style: {
                            color: colors[i]
                        }
                    },
                    lineWidth: 2,
                    lineColor: colors[i]
                };

                // As we're loading the data asynchronously, we don't know what order it will arrive. So
                // we keep a counter and create the chart when all the data is loaded. 
                seriesCounter++;

                if (seriesCounter == names.length) {
                    createChart();
                }
            });
        });



        // create the chart when all data is loaded
        function createChart() {

            chart = new Highcharts.StockChart({
                chart: {
                    renderTo: 'container',
                    alignTicks: false
                },

                rangeSelector: {
                    selected: 1
                },

                title: {
                    text: null
                },

                xAxis: {
                    type: 'datetime',
                    maxZoom: 14 * 24 * 3600000, // fourteen days
                    title: {
                        text: null
                    }
                },
                yAxis: yAxisOptions,

                series: seriesOptions
            });
        }

    });
    </script>
    <script type="text/javascript" src="js/themes/gray.js"></script>

任何示例/代码将不胜感激！

干杯！

Answer 1

如果您查看您提供的演示页面的源代码，您会看到它是如何处理 CSV 数据的。 JSON 结果更易于使用。

更新：documentation 向您展示了有关数据外观的更多信息。