Saya mencoba meneruskan nilai string dari pengontrol saya ke javascript saya untuk membuat bagan saya melalui klik tombol.

Di pengontrol saya, saya menanyakan data yang diperlukan dan menggemakan nilai pengembalian, di bawah ini adalah nilainya

 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" }]}
                    ]
                })

Saya menggunakan ajax untuk mendapatkan nilai di atas seperti di bawah ini:

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

Dan kemudian saya akan menetapkannya ke variabel dan render() itu

 var chart = return_first;
 chart.render();

Tapi itu terus kembali dan error Uncaught TypeError: chart.render is not a function

Saya mencoba merendernya secara normal dan bukan dari ajax yang menampilkan bagan tetapi saya perlu mengubah nilai bagan saat mengirimkan nama perangkat.

Terima kasih sebelumnya untuk bantuan.

---MEMPERBARUI---

Saya mencoba meneruskan hanya nilai di dalam data[] dan memanggil render() di dalam success.

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

Saya mengalami kesalahan

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

Ini di canvas.minjs

0
natsumiyu 29 Oktober 2019, 05:54

2 jawaban

Jawaban Terbaik

Data datang sebagai string, jadi Anda menetapkan tmp ke string, yang tidak memiliki fungsi render(). Anda perlu eval() string untuk menjalankannya sebagai kode, yang kemudian akan membuat objek Anda:

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

Sekedar catatan, eval umumnya bukan cara terbaik untuk melakukan sesuatu. Di sini Anda dapat mempertimbangkan untuk mengembalikan hanya pengaturan json di API Anda dan membuat objek dengan sukses:

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

--- PEMBARUAN ---

Berdasarkan kode terbaru Anda, Anda ingin sisi server Anda mengembalikan ini:

[
                        {
                                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" }]}
                    ]

Dan kode sisi klien Anda akan terlihat seperti ini:

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;
    }();
1
clumsyfingers 29 Oktober 2019, 20:02
var chart = return_first;
chart.render();

Return_first adalah fungsi Anda yang membuat panggilan ajax, dan Anda menugaskannya ke bagan. Jadi wajar jika javascript mengatakan: hei, fungsi return_first Anda tidak memiliki fungsi yang disebut render.

Mungkin Anda perlu menetapkan variabel lain var ChartJS Anda, dan kemudian memanggil render. Sesuatu seperti:

var myChart = new CanvasJS.Chart(...);
myChart.render();
0
Maximiliano Poggio 29 Oktober 2019, 02:58