用JSON格式化JavaScript代码到HighCharts

我有一个网站使用AJAX将一个JSON格式的字符串传递给HighCharts图表。用JSON格式化JavaScript代码到HighCharts

你可以看到这是中间的JSON代码的一部分：

$('#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”：{ “格式化” ：function（）{return this.point.name +'：'+ this.percentage.toFixed（1）+'％';}}

未通过JSON传输

所有研究都告诉我，没有办法做到这一点。

IE浏览器... Is it valid to define functions in JSON results?

任何人有关于如何绕过这个限制的想法？

来源

2014-10-20 Scott Savage

对不起;我误解了介绍。确实，你不能通过JSON发送函数，但是在你调用Highcharts之前，没有什么能阻止你在客户端添加这些函数。 – Pointy 2014-10-20 18:04:00

你为什么要通过AJAX将你的Highcharts选项发送到服务器？ Highcharts是一个客户端绘图库，你的服务器将如何处理配置？ – Mark 2014-10-20 18:19:20

确实无法在JSON中传递函数。 Javascript是JSON的超集。

一种常用的方法是在javascript中定义图表（例如在页面加载期间），然后页面通过Ajax请求数据。返回数据时，可以在渲染之前或之后使用highcharts API将其添加到图表对象。

如果你真的想从图表的服务器进行格式化功能，将其作为一个字符串，然后把它变成像这样的功能：

var fn = Function(mystring);

，并在像highcharts使用它：

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

我重新分解你的例子来说明该方法：http://jsfiddle.net/wo7zn0bw/

来源

2014-10-21 07:48:45 SteveP

真棒！这正是我需要的。谢谢。 – 2014-10-21 17:03:54

完美工作。 – 2014-10-21 17:18:54

我也有过类似的难题。我想创建JSON服务器端（ruby on rails），这样我就可以为Web API创建图表图像，并使用相同的代码在客户端Web浏览器上显示它。这与SteveP的答案类似。

要使用JSON标准接轨，我改变了所有格式化功能为字符串

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

在网络方面，我浏览了哈希查找格式的密钥，并使用此代码的函数替换它们（可能是更好的方法！？）。 的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")

此时哈希/ JS对象是Highcharts准备

类似的想法被用于web图像API。

我真的很希望在JSON上进行黑客攻击并不是唯一的解决方案，但它很有效！

来源

2015-09-24 19:44:47

用JSON格式化JavaScript代码到HighCharts

回答

相关问题