使用JSON將格式化的JavaScript代碼傳遞給HighCharts

Question

我有一個使用AJAX將JSON格式的字符串傳遞到HighCharts圖表的網站。

您可以在以下位置將其視為中間JSON代碼部分：

http://jsfiddle.net/1Loag7pv/

$('#container').highcharts(

//JSON Start

{
"plotOptions": {
"series": {"animation": {"duration": 500}}
,"pie": {
"allowPointSelect": true,
"cursor": "pointer",
"dataLabels": {"formatter":function(){return this.point.name+': '+this.percentage.toFixed(1) + '%';}}
    }
},
"chart":{"renderTo":"divReportChart"}
,"title":{"text":"Sales Totals"}
,"xAxis":{"title":{"text":"Item"}, "categories":["Taxes","Discounts","NetSalesTotal"], "gridLineWidth":1}
,"yAxis":[{"title":{"text":"Amount"}, "gridLineWidth":1}]
,"series":[{"name":"Amount","type":"pie", "startAngle": -60,"yAxis": 0,"data":[["Taxes",17.8700],["Discounts",36.0000],["NetSalesTotal",377.9500]]}]
}

 //JSON end

);

問題是功能部分...

“ dataLabels”：{“ formatter”：function（）{返回this.point.name +'：'+ this.percentage.toFixed（1）+'％';}}

不通過JSON傳輸

所有研究都告訴我，沒有辦法做到這一點。

IE ... 在JSON結果中定義函數是否有效？

有人知道如何解決此限制嗎？

Answer 1

的確，您不能通過JSON傳遞函數。 Javascript是JSON的超集。

一種常見的方法是在javascript中定義圖表（例如在頁面加載期間），然后頁面僅通過Ajax請求數據。 返回數據后，可以在呈現之前或之后使用highcharts API將其添加到圖表對象。

如果您真的想通過服務器將格式化程序功能與圖表一起傳遞，請將其作為字符串發送，然后將其轉換為如下功能：

var fn = Function(mystring);

並在如下圖表中使用它：

chart.plotOptions.pie.dataLabels = {"formatter":fn};

我已經重構了您的示例以顯示該方法： http : //jsfiddle.net/wo7zn0bw/

Answer 2

我有一個類似的難題。 我想創建JSON服務器端（紅寶石），以便為Web API創建圖表圖像，並使用相同的代碼在客戶端Web瀏覽器上顯示它。 這類似於SteveP的答案。

為了符合JSON標准，我將所有格式化程序功能都更改為字符串

{"formatter": "function(){ return this.point.name+':'+this.percentage.toFixed(1) + '%';}"}

在Web端，我瀏覽哈希查找格式鍵，然后使用此代碼將其替換為函數（可能是更好的方法！？）。 javascript ：

function HashNavigator(){

    this.navigateAndReplace = function(hash, key){
        if (!this.isObject(hash)){
            //Nice if only navigated hashes and arrays
            return;
        }

        var keys = Object.keys(hash);
        for(var i = 0; i< keys.length; i++){
            if (keys[i] == key){
                //convert string to js function
                hash[keys[i]] = this.parseFunction(hash[keys[i]]);
            } else if (this.isObject(hash[keys[i]])){
                //navigate hash tree
                this.navigateAndReplace(hash[keys[i]], key);
            } else {
                //continue
            }
        }
    };

    this.isObject = function(testVar) {
        return testVar !== null && typeof testVar === 'object'
    }

    //http://stackoverflow.com/questions/7650071/is-there-a-way-to-create-a-function-from-a-string-with-javascript
    this.parseFunction = function(fstring){
        var funcReg = /function *\(([^()]*)\)[ \n\t]*{(.*)}/gmi;
        var match = funcReg.exec(fstring.replace(/\n/g, ' '));

        if(match) {
            return new Function(match[1].split(','), match[2]);
        }

        return null;
    };

}

要使用它，將類似於以下javascript ：

hashNavigator = new HashNavigator();
hashNavigator.navigateAndReplace(myHighchartsHash, "formatter")

到那時，hash / js對象已准備就緒

Web Image API使用了類似的想法。

我真的希望對JSON進行黑客攻擊不是唯一的解決方案，但它可以起作用！

Answer 3

我使用了不同的方法。 我創建了如下的JSON

{"formatter": "function(){ return this.point.name+':'+this.percentage.toFixed(1) + '%';}"}

在評估表達式時，我使用了（假設'formatter'的值是formatterValueString ）

formatterValueString = formatterValueString.replace('function()', '');
let opts = (new Function(formatterValueString)).call(this);
formatterValue = opts;

使用這種方法的原因是很難將“ this”與函數綁定。 eval（）函數不能很好地訪問變量this。 我相信有很多方法可以做到。 只是認為這很快。