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文件中，并且仅从服务器传递相关数据

检出fiddle

或下面的代码

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变量，对其求值并运行该函数。

如何通过JSON将动态选项（function（））传递给Highcharts？

2 个答案: