Question

我想使用JSON制作带有动态数据的图表js，我仍然混淆在图表中使用JSON，下面有图表js代码和我的文件json。图表中的标签使用json中的'tahun'和使用json中的'e_nilai'的数据。

这是我的静态折线图JS：

ChartJs.prototype.init = function() {
    //creating lineChartexport
    var lineChart = {
        labels: ["2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017"],
        datasets: [
            {
                label: "Nilai Ekspor ($)",
                fill: false,
                lineTension: 0.1,
                backgroundColor: "#5d9cec",
                borderColor: "#5d9cec",
                borderCapStyle: 'butt',
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                pointBorderColor: "#5d9cec",
                pointBackgroundColor: "#fff",
                pointBorderWidth: 5,
                pointHoverRadius: 5,
                pointHoverBackgroundColor: "#5d9cec",
                pointHoverBorderColor: "#eef0f2",
                pointHoverBorderWidth: 2,
                pointRadius: 1,
                pointHitRadius: 10,
                data: [59, 50, 41, 56, 55, 40, 35, 30, 40, 45, 50, 53, 45, 60, 65, 70, 80, 90]
            }]
    };

    var lineOpts = {
        scales: {
            yAxes: [{
                ticks: {
                    max: 100,
                    min: 20,
                    stepSize: 10
                }
            }
          ]
        }
    };

    this.respChart($("#lineChartExport"),'Line',lineChart, lineOpts);

这是我的文件data.JSON：

[{
    "id_ekspor": "EAA01",
    "e_berat": "123791375",
    "e_nilai": "321652431",
    "tahun": "2000",
    "id_industri": "ID01"
}, {
    "id_ekspor": "EAA02",
    "e_berat": "135719274",
    "e_nilai": "253398253",
    "tahun": "2001",
    "id_industri": "ID01"
}, {
    "id_ekspor": "EAA03",
    "e_berat": "187393877",
    "e_nilai": "336003121",
    "tahun": "2002",
    "id_industri": "ID01"
}, {
    "id_ekspor": "EAA04",
    "e_berat": "128295793",
    "e_nilai": "368611670",
    "tahun": "2003",
    "id_industri": "ID01"
}, {
    "id_ekspor": "EAA05",
    "e_berat": "171821748",
    "e_nilai": "364339174",
    "tahun": "2004",
    "id_industri": "ID01"
}, {
    "id_ekspor": "EAA06",
    "e_berat": "281319414",
    "e_nilai": "620528336",
    "tahun": "2005",
    "id_industri": "ID01"
}, {
    "id_ekspor": "EAA07",
    "e_berat": "339357790",
    "e_nilai": "1117675174",
    "tahun": "2006",
    "id_industri": "ID01"
}, {
    "id_ekspor": "EAA08",
    "e_berat": "828240527",
    "e_nilai": "1285587692",
    "tahun": "2007",
    "id_industri": "ID01"
}, {
    "id_ekspor": "EAA09",
    "e_berat": "541271140",
    "e_nilai": "1506863073",
    "tahun": "2008",
    "id_industri": "ID01"
}, {
    "id_ekspor": "EAA10",
    "e_berat": "435374795",
    "e_nilai": "1785347418",
    "tahun": "2009",
    "id_industri": "ID01"
}, {
    "id_ekspor": "EAA11",
    "e_berat": "392740658",
    "e_nilai": "1942154132",
    "tahun": "2010",
    "id_industri": "ID01"
}, {
    "id_ekspor": "EAA12",
    "e_berat": "310010079",
    "e_nilai": "2171049091",
    "tahun": "2011",
    "id_industri": "ID01"
}, {
    "id_ekspor": "EAA13",
    "e_berat": "253303518",
    "e_nilai": "1924902851",
    "tahun": "2012",
    "id_industri": "ID01"
}, {
    "id_ekspor": "EAA14",
    "e_berat": "241833783",
    "e_nilai": "1850122870",
    "tahun": "2013",
    "id_industri": "ID01"
}, {
    "id_ekspor": "EAA15",
    "e_berat": "213647160",
    "e_nilai": "1538193197",
    "tahun": "2014",
    "id_industri": "ID01"
}, {
    "id_ekspor": "EAA16",
    "e_berat": "262358687",
    "e_nilai": "1507887694",
    "tahun": "2015",
    "id_industri": "ID01"
}, {
    "id_ekspor": "EAA17",
    "e_berat": "387940300",
    "e_nilai": "2124722151",
    "tahun": "2016",
    "id_industri": "ID01"
}, {
    "id_ekspor": "EAA18",
    "e_berat": "241644238",
    "e_nilai": "1624678879",
    "tahun": "2017",
    "id_industri": "ID01"
}]

我想将数据'e_nilai'作为数据，'tahun'作为标签..

如何在图表JS中使用JSON动态数据？

请帮忙，

谢谢

Answer 1

您应该从json数据构建标签。检查一下：

var json = [
 // your data json listed here
]

var label = []
var data = []
json.forEach(function (element) {
    label.push(element.tahun)
  data.push(element.e_nilai)
})

console.log(label, data)

然后您可以将您的数据和标签用于Chart.js。

这里是fiddle

<强>更新

如果您使用ajax，请将其调用为成功。

$.ajax({
  method: 'GET',
  url: 'your_url',
  dataType: 'json',
  success: function (response) {
    var label = []
    var data = []
    response.forEach(function (element) {
      label.push(element.tahun)
      data.push(element.e_nilai)
    })
    // your chart goes here
  }
})

如何在Codeigniter中使用JSON制作动态图表js？

1 个答案: