Uncaught TypeError: chart.render is not a function

Question

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

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

 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();

但它一直在 returning 和错误 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 分配给另一个变量，然后从那里调用渲染。类似于：

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

Answer 2

数据以字符串形式传递，因此您将 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;
    }();

Uncaught TypeError: chart.render is not a function

Uncaught TypeError: chart.render is not a function

javascript

canvasjs