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();
}
我正在使用 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();
}