Как передать динамические параметры (function ()) в Highcharts из JSON?

Question

В настоящее время я использую библиотеку Highcharts в контроллере AngularJS.Наши параметры 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

Это пример кода:

<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, оцените ее и запустите функцию.

Answer 2

Вы можете просто разделить определение параметров форматирования и оставить его в каком-то статическом файле 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>