服務器端圖表.svg與Highcharts和PhantomJS導出，從.csv文件加載數據時出錯

Question

我一直在嘗試根據章節開發圖表（使用Highcharts庫）的服務器端圖片導出（.svg）解決方案在協議出版書「Learning Highcharts」 - 章節：「在服務器端運行Highcharts」。本書中的示例使用HighchartExport.js腳本和存儲在seriesData.js文件和PhantomJS（無頭Webkit）中的數據。我發現以.csv或xml或json等格式從數據庫導出數據「正常」，所以我製作了基於http://www.highcharts.com/docs/working-with-data/preprocessing-data-from-a-file-csv-xml-json的圖表。在正常的瀏覽器 - 服務器環境中執行時，圖表工作得很好，但是當我爲PhantomJS重寫它時，出現了一些問題。我使用的PhantomJS腳本代碼如下：

/* 
This is HighchartsExportSO.js 
phantomJS Script for Highcharts chart 
(data in file test.csv) 
*/ 

var system = require('system'); 
var page = require('webpage').create(); 
var fs = require('fs'); 

page.onError = function (msg, trace) { 
    console.log(msg); 
    trace.forEach(function(item) { 
     console.log(' ', item.file, ':', item.line); 
    }) 
} 

/*Callback to enable messages from inside page evaluate function*/ 
page.onConsoleMessage = function (msg) { 
    console.log('Page says: ' + msg); 
}; 

page.onResourceRequested = function(requestData, networkRequest) { 
    console.log('Request (#' + requestData.id + '): ' + JSON.stringify(requestData)); 
}; 

page.onResourceReceived = function(response) { 
    console.log('Response (#' + response.id + ', stage "' + response.stage + '"): ' + JSON.stringify(response)); 
}; 

page.onResourceError = function(resourceError) { 
    console.log('Unable to load resource (#' + resourceError.id + 'URL:' + resourceError.url + ')'); 
    console.log('Error code: ' + resourceError.errorCode + '. Description: ' + resourceError.errorString); 
}; 

page.injectJs("jquery-1.10.2.min.js"); 
page.injectJs("highcharts.js"); 
page.injectJs("exporting.js"); 

// Load width and height from parameters 
var width = parseInt(system.args[2], 10) || 1366; 
var height = parseInt(system.args[3], 10) || 768; 

// Build up result and chart size args for evaluate function 
var evalArg = { 
width: width, 
height: height 
}; 

// The page.evaluate method takes on a function and 
// executes it in the context of page object. 
var svg = page.evaluate(function(opt) { 
    $('body').append('<div id="container"/>'); 
    /*Setting chart options*/ 
    var options = { 
       chart: { 
        renderTo: 'container', 
       }, 
       title: { 
        text: 'Chart Name 
       }, 
       xAxis: { 
        type: 'datetime', 
        labels: { 
         step: 10, 
         rotation: -45, 
         style: { 
          fontSize: '9px', 
          fontFamily: 'Verdana, sans-serif' 
         } 
        }, 
        categories: [] 
       }, 
       yAxis: { 
        title: { 
         text: '% Percentage' 
        } 
       }, 
       series: [] 
      }; 

    //Loading data from csv file  
    $.get('test.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); 
        } 
       }); 
    }); 
    var chart = new Highcharts.Chart(options); 
    return chart.getSVG(); 
}, evalArg); 
if (fs.isFile("chart.svg")) { 
fs.remove("chart.svg"); 
} 
fs.write("chart.svg", svg); 
phantom.exit(); 

所以，當我在cmd中執行「phantomjs.exe HighchartsExportSO.js」，我沒有得到任何錯誤的，實際.svg文件正在生成的，但沒有數據序列，這使我相信$ get函數有問題。我的問題是爲什麼不在PhantomJS中工作，我必須做些什麼才能使其工作。 （順便說一句，我在Win7環境和PhantomJS版本我工作是1.9.2） 的示例數據文件（test.csv）將包含以下數據：

Dates,01-JUL-13,02-JUL-13,03-JUL-13,04-JUL-13,05-JUL-13,06-JUL-13,07-JUL-13 
Series1,74.57,76.91,84.35,85.3,86.25,89.31,89.73 
Series2,100,99.99,99.99,99.99,99.99,99.99,99.99 
Series3,97.09,99.8,99.85,99.9,99.91,99.92,99.94 

Answer 1

的$不用彷徨功能是格格不入這裏。 JQuery $ .get使用GET請求從服務器加載數據。相反，你需要一個純文件讀取。

一個例子，你可以做到這一點。

// read the csv file 
var data = fs.read('test.csv'); 

var svg = page.evaluate(function(opt, data) { 
    ... 
    var lines = data.split('\n'); 
    // Iterate over the lines and add categories or series 
    $.each(lines, function(lineNo, line) { 
     ... 
    }); 
},evalArg, data);