JSON : 将 Json 转换为图表 CanvasJS

JSON : Convert Json For Chart CanvasJS

我正在使用 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”}]

我已经阅读了关于 Accepted Data 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"}]

谢谢

It's My code to make Chart

<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>

您可以使用 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();

}