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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (110)

我想使用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?

提问于
用户回答回答于

你应该从你的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)

如果使用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
  }
})

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动