可以用 JSON 发送 javascript 函数吗？

发布于 2024-12-09 03:56:44 字数 1092 浏览 1 评论 0原文

我正在使用 Highcharts 来显示图表：当文档准备好时，ajax 请求将获取数据（ JSON 格式）并使用一些默认数据和一些动态数据（点）初始化 chart 对象：

$('document').ready(function() {

    var chart;

    $.ajax({
        url: "{{ path('stats_update') }}",
        type: "POST",
        dataType: "json",
        success: function(data){
            data.chart.renderTo = 'chart'; // id of the div element
            chart = new Highcharts.Chart(data); // inizialize chart object
        }
    });

}); // end of document.ready

到目前为止一切都很好，除非我必须发回一些回调。它不起作用，我找不到原因。图表“冻结”并且不显示工具提示：

这是格式化程序函数回调应如何初始化（工作）：

var chart = new Highcharts.Chart({
    tooltip: {
        formatter: function() { return this.x; }
});

这是我使用 JSON 发回回调的方式：Twig 模板引擎输出JSON，手动 - 无 json_encode（不起作用）：

{
   "tooltip" : {
      "formatter" : "function() { return this.x; }"
   }
}

使用 jQuery 解析 JSON 时没有错误。我会管理我不是 javascript 也不是 jQuery 专家...感谢您的帮助。

原文

I'm using Highcharts to display charts: when the document is ready an ajax request will fetch the data (JSON format) and initialize the chart object with some default data and some dynamic data (points):

$('document').ready(function() {

    var chart;

    $.ajax({
        url: "{{ path('stats_update') }}",
        type: "POST",
        dataType: "json",
        success: function(data){
            data.chart.renderTo = 'chart'; // id of the div element
            chart = new Highcharts.Chart(data); // inizialize chart object
        }
    });

}); // end of document.ready

So far so good all works fine except when i have to send back some callbacks. It's not working and i can't find why. The chart "freezes" and no tooltip is displayed:

This is how the formatter function callback should be initialized (working):

var chart = new Highcharts.Chart({
    tooltip: {
        formatter: function() { return this.x; }
});

This is how i send back the callback using JSON: Twig template engine outputting JSON, manually - no json_encode (not working):

{
   "tooltip" : {
      "formatter" : "function() { return this.x; }"
   }
}

There are no errors in JSON parsing with jQuery. I'd admin i'm not a javascript nor jQuery guru... thanks for helping.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

ぃ双果 2024-12-16 03:56:44

twig 模板中的函数将作为字符串而不是函数输出。

$.ajax({
    url: "{{ path('stats_update') }}", 
    type: "POST", 
    dataType: "json",
    success: function(data){
        data.chart.renderTo = 'chart'; // id of the div element
        data.tooltip.formatter = eval('(' + data.tooltip.formatter + ')');
        chart = new Highcharts.Chart(data); // inizialize chart object
    }
});

the function from your twig template is output as a string instead of a function.

$.ajax({
    url: "{{ path('stats_update') }}", 
    type: "POST", 
    dataType: "json",
    success: function(data){
        data.chart.renderTo = 'chart'; // id of the div element
        data.tooltip.formatter = eval('(' + data.tooltip.formatter + ')');
        chart = new Highcharts.Chart(data); // inizialize chart object
    }
});

回复收藏 0 原文

寄风 2024-12-16 03:56:44

您无法使用 JavaScript / JSON 序列化函数。

回复收藏 0 原文

吲‖鸣 2024-12-16 03:56:44

我不会从服务器请求整个 options 对象，而是仅请求数据并创建图表，如下所示 -

$('document').ready(function() {

    var chart;

    $.ajax({
        url: "{{ path('stats_update') }}",
        type: "POST",
        dataType: "json",
        success: function(data){ // <--- send just the data array from server

            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'chart'; // id of the div element
                },
                //...                    
                tooltip: {
                    formatter: function() { 
                        return this.x; 
                    }
                },
                //...
                series: [{
                    data: eval('(' + data + ')')
                }]
            }); // inizialize chart object
        }
    });

}); // end of document.ready

Instead of requesting the whole options object from the server, I would request just the data and create the chart as follows -

$('document').ready(function() {

    var chart;

    $.ajax({
        url: "{{ path('stats_update') }}",
        type: "POST",
        dataType: "json",
        success: function(data){ // <--- send just the data array from server

            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'chart'; // id of the div element
                },
                //...                    
                tooltip: {
                    formatter: function() { 
                        return this.x; 
                    }
                },
                //...
                series: [{
                    data: eval('(' + data + ')')
                }]
            }); // inizialize chart object
        }
    });

}); // end of document.ready

回复收藏 0 原文

~没有更多了~