如何将动态选项(函数())从 JSON 传递给 Highcharts

Question

我目前正在AngularJS控制器中使用Highcharts库。我们的Highcharts选项是用JS计算的服务器端，并以JSON形式发送到客户端。它非常适合简单的选项。示例 1：

/** SERVER SIDE **/
JSON.stringify(
{
        title: {
            text: "My title"
        }
});

但是我不能像函数一样传递动态选项。

示例 2：

/** SERVER SIDE **/
JSON.stringify(
{
    tooltip: {
        formatter: function () {
            return 'The value for <b>' + this.x +
                '</b> is <b>' + this.y + '</b>';
        }
    }
});

在客户端，我们解析并使用Highcharts.chart((函数来生成图表。https://jsfiddle.net/christophes/s4vweyh0/4

您是否有一个 JavaScript 技巧，能够在 JSON 中传递函数并在客户端解释它们。否则，您知道我是否可以在加载图表后(例如使用 jQuery(在客户端添加这些动态选项(函数(吗？

备注：我想在angularJS作用域中定义动态选项，并在他的子作用域中执行Highcharts.chart(...(。如何从父范围访问此变量？

提前致谢

Answer 1

你可以简单地拆分格式化选项的定义，并将其保留在一些静态JS文件中，只从服务器传递相关数据

查看小提琴

或下面的代码

Highcharts.setOptions({
	tooltip: {
        formatter: function () {
            return 'The value for <b>' + this.x +
                '</b> is <b>' + this.y + '</b>';
        }
    }
});
Highcharts.chart('container', {
    title: {
      text: "My title"
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4]
    }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

Answer 2

这是一个示例代码：

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

var myFunc = "Highcharts.chart('container', { title: { text: 'My title'  }, tooltip: { formatter: function () {       return 'The value for <b>' + this.x +                 '</b> is <b>' + this.y + '</b>';  }    },     xAxis: {         categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']     }, series: [{         data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]     }, {         data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4]     }] });"; 

$(document).ready(function() {
    var data = new Object();
    data.func = myFunc;
    var jsonVal = JSON.stringify(data);
    var newObj = $.parseJSON(jsonVal);
    eval(newObj.func);
});

试试这个工作 jsfiddle。

实际上，您可以将图表函数封装在javascript变量中。您将包含函数的变量放在对象中。之后，转换 JSON 字符串中的对象并将其发送到客户端。 在客户端，您将收到 JSON 变量，对其进行评估并运行函数。