Как сделать динамический график JS с использованием JSON в Codeigniter?

Question

Я хочу сделать диаграмму JS с динамическими данными, используя JSON, я все еще путаю использование JSON в диаграмме. Ниже приведен код диаграммы JS и мой файл JSON.Метки в диаграмме с использованием 'tahun' в json и данных с использованием 'e_nilai' в json.

Вот моя статическая линейная диаграмма 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' в качестве меток ..

Как использовать JSON для динамических данных в диаграмме JS?

Пожалуйстапомощь,

Спасибо

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.

Здесь скрипка

Обновление:

, если вы используете 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
  }
})