未捕获的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

Answer 1

var chart = return_first;
chart.render();

return_first是正在执行ajax调用的函数，您正在将其分配给图表。因此，JavaScript在说这很正常：嘿，您的return_first函数没有名为render的函数。

也许您需要将ChartJS变量分配给另一个变量，然后从那里调用渲染。类似于：

var myChart = new CanvasJS.Chart(...);
myChart.render();

Answer 2

数据作为字符串传递，因此您正在将tmp分配给不具有函数render（）的字符串。您需要eval（）字符串以使其作为代码执行该字符串，然后将创建您的对象：

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

仅需注意，评估通常不是做事情的最佳方法。在这里，您可以考虑仅在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;
}();