【问题标题】:JSON : Convert Json For Chart CanvasJSJSON:为图表 CanvasJS 转换 Json
【发布时间】:2019-09-17 23:27:35
【问题描述】:

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

谢谢

这是我制作图表的代码

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

【问题讨论】:

标签: javascript json encode


【解决方案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();

}

【讨论】:

  • var tampil_kategori = '&lt;?= $tampil_kategori ?&gt;'; const to = tampil_kategori.map(item =&gt; ({ y: item.jumlah_berita, label: item.nama_kategori })); 。我已经关注了,但出现错误,Uncaught TypeError: tampil_kategori.map is not a function
  • 更新的答案,也许更清楚。如果newdataPoints 是您在问题中提到的那种格式,那么这应该可以工作
猜你喜欢
  • 1970-01-01
  • 2020-08-17
  • 1970-01-01
  • 2021-10-16
  • 2010-10-01
  • 2012-01-08
  • 2017-02-14
  • 2017-03-19
  • 2013-09-03
相关资源
最近更新 更多