javascript - 未捕获的 TypeError：chart.render 不是函数

Question

我正在尝试将字符串值从我的控制器传递到我的 javascript，以便通过单击按钮来呈现我的图表。

在我的控制器中，我查询所需的数据并回显返回值，下面是值

 new CanvasJS.Chart("myChart", {
                    animationEnabled: true,
                    theme: "light2",
                    title:{
                        text: "Devices"
                    },
                    axisY: {
                        title: "From"
                    },
                    legend: {
                        cursor:"pointer",
                         itemclick : toggleDataSeries
                    },
                    toolTip: {
                        shared: true,
                        content: toolTipFormatter
                    },
                    data: [
                        {
                                type: "bar",
                                showInLegend: true,
                                name: "A",
                                dataPoints: [{ y: 2, label: "Keyboard" },{ y: 13, label: "Laptop" }]},{
                                type: "bar",
                                showInLegend: true,
                                name: "B",
                                dataPoints: [{ y: 1, label: "Keyboard" },{ y: 0, label: "Laptop" }]}
                    ]
                })

我使用 ajax 来获得上面的值，如下所示：

         var return_first = function () {
          var tmp = null;
          $.ajax({
            'async': false,
            'type': "POST",
            'global': false,
            'dataType': 'html',
            'url': base_url + 'my_controller/dChart',
            'data': {
                'dev_fil' : $("#dev_fil").val()
            },
            'success': function (data) {
                tmp = data;
            }
        });
        return tmp;
    }();

然后我将它分配给一个render()变量

 var chart = return_first;
 chart.render();

但它不断返回和错误Uncaught TypeError: chart.render is not a function

我试图正常渲染它而不是从 ajax 显示图表，但我需要在提交设备名称时更改图表的值。

预先感谢您的帮助。

- -更新 - -

我试图只传递 data[] 内部的值并调用render()内部成功。

var return_first = function () {
          var tmp = null;
          $.ajax({
            'async': false,
            'type': "POST",
            'global': false,
            'dataType': "html",
            'url': base_url + 'my_controller/dChart',
            'data': {
                'dev_fil' : $("#dev_fil").val()
            },
            'success': function (data) {
                console.log(data)
                tmp = new CanvasJS.Chart("myChart", {
                    animationEnabled: true,
                    theme: "light2",
                    title:{
                        text: "Device Replacement"
                    },
                    axisY: {
                        title: "Outlets"
                    },
                    legend: {
                        cursor:"pointer",
                         itemclick : toggleDataSeries
                    },
                    toolTip: {
                        shared: true,
                        content: toolTipFormatter
                    },
                    data: [data]
                });
                tmp.render();
            }
        });
        return tmp;
    }();

我有一个错误

Uncaught TypeError: Cannot use 'in' operator to search for 'name' in {
                                type: "bar",
                                showInLegend: true,
                                name: "AA",
                                dataPoints: [{ y: 13, label: "Laptop" }]}

它在 canvas.minjs

标签： javascriptcanvasjs

Answer 1

数据以字符串形式传入，因此您将 tmp 分配给不具有函数 render() 的字符串。您需要 eval() 字符串以使其将字符串作为代码执行，然后创建您的对象：

'success': function (data) {
            tmp = eval(data);
        }

请注意， eval 通常不是做事的最佳方式。在这里，您可能会考虑仅返回 API 中的 json 设置并成功创建对象：

var return_first = function () {
      var tmp = null;
      $.ajax({
        'async': false,
        'type': "POST",
        'global': false,
        'dataType': 'json', // notice we changed to 'json' here
        'url': base_url + 'my_controller/dChart',
        'data': {
            'dev_fil' : $("#dev_fil").val()
        },
        'success': function (data) {
            tmp = new CanvasJS.Chart("myChart", data);
        }
    });
    return tmp;
}();

- - 更新 - -

根据您最近的代码，您希望服务器端返回以下内容：

[
                        {
                                type: "bar",
                                showInLegend: true,
                                name: "A",
                                dataPoints: [{ y: 2, label: "Keyboard" },{ y: 13, label: "Laptop" }]},{
                                type: "bar",
                                showInLegend: true,
                                name: "B",
                                dataPoints: [{ y: 1, label: "Keyboard" },{ y: 0, label: "Laptop" }]}
                    ]

您的客户端代码将如下所示：

var return_first = function () {
          var tmp = null;
          $.ajax({
            'async': false,
            'type': "POST",
            'global': false,
            'dataType': "json", // note we set json here
            'url': base_url + 'my_controller/dChart',
            'data': {
                'dev_fil' : $("#dev_fil").val()
            },
            'success': function (data) {
                console.log(data)
                tmp = new CanvasJS.Chart("myChart", {
                    animationEnabled: true,
                    theme: "light2",
                    title:{
                        text: "Device Replacement"
                    },
                    axisY: {
                        title: "Outlets"
                    },
                    legend: {
                        cursor:"pointer",
                         itemclick : toggleDataSeries
                    },
                    toolTip: {
                        shared: true,
                        content: toolTipFormatter
                    },
                    data: data // notice data is not wrapped in brackets because it's already an array
                });
                tmp.render();
            }
        });
        return tmp;
    }();