JSON：將Json轉換為Chart CanvasJS

Question

我正在使用Canvas JS處理圖表，無法獲取數據。 我有這樣的結果json_encode() ：

[{“jumlah_berita”:2,”nama_kategori”:”Music”},{“jumlah_berita”:1,”nama_kategori”:”Sport”},{“jumlah_berita”:1,”nama_kategori”:”Agama”},{“jumlah_berita”:0,”nama_kategori”:”Teknologi”},{“jumlah_berita”:1,”nama_kategori”:”Pendidikan”},{“jumlah_berita”:0,”nama_kategori”:”Cinta”},{“jumlah_berita”:0,”nama_kategori”:”coba test”}]

我已經閱讀過有關接受的數據CanvasJS的文檔Canvas JS ，這意味着我的json無效。

我的問題是，如何轉換JSON

從：

[
 {“jumlah_berita”:2,”nama_kategori”:”Music”}, 
 {“jumlah_berita”:1,”nama_kategori”:”Sport”}, 
 {“jumlah_berita”:1,”nama_kategori”:”Agama”}, 
 {“jumlah_berita”:0,”nama_kategori”:”Teknologi”}, 
 {“jumlah_berita”:1,”nama_kategori”:”Pendidikan”}, 
 {“jumlah_berita”:0,”nama_kategori”:”Cinta”}, 
 {“jumlah_berita”:0,”nama_kategori”:”coba test”}
]

至 ：

[{y:2,label:"Music"},
{y:1,label:"Sport"},
{y:1,label:"Agama"},
{y:0,label:"Teknologi"},
{y:2,label:"Pendidikan"}]

謝謝

這是我制作圖表的代碼

<script>
    window.onload = function() {
        var tampil_kategori = '<?= $tampil_kategori ?>';
        var newdataPoints = JSON.parse(tampil_kategori);
        var jumlahBerita = new CanvasJS.Chart("chartContainer2", {
            animationEnabled: true,
            theme: "light2", // "light1", "light2", "dark1", "dark2"
            title: {
                text: "Jumlah Berita(per Kategori)"
            },

            data: [{
                type: "column",
                dataPoints: newdataPoints
            }]
        });

        jumlahBerita.render();

    }
</script>

Answer 1

您可以使用map ：

const to = from.map(item => ({
  y: item.jumlah_berita,
  label: item.nama_kategori
}));

編輯

window.onload = function() {
    var tampil_kategori = [
       {“jumlah_berita”:2,”nama_kategori”:”Music”}, 
       {“jumlah_berita”:1,”nama_kategori”:”Sport”}, 
       {“jumlah_berita”:1,”nama_kategori”:”Agama”}, 
       {“jumlah_berita”:0,”nama_kategori”:”Teknologi”}, 
       {“jumlah_berita”:1,”nama_kategori”:”Pendidikan”}, 
       {“jumlah_berita”:0,”nama_kategori”:”Cinta”}, 
       {“jumlah_berita”:0,”nama_kategori”:”coba test”}
    ];

    // map here --------------------------------
    var newdataPoints = tampil_kategori.map(item => ({
        y: item.jumlah_berita,
       label: item.nama_kategori
    }));
    // -----------------------------------------

    var jumlahBerita = new CanvasJS.Chart("chartContainer2", {
        animationEnabled: true,
        theme: "light2", // "light1", "light2", "dark1", "dark2"
        title: {
            text: "Jumlah Berita(per Kategori)"
        },

        data: [{
            type: "column",
            dataPoints: newdataPoints
        }]
    });

    jumlahBerita.render();

}