$ .getJSON嵌套对象和chartJS

时间:2018-01-19 16:35:06

标签: chart.js getjson

我需要帮助使用基于特定对象的数据设置我的chartJS,$ .getJSON是我最弱的技能。

这是我通过URL获取的json:

[
{"ProgramID":100,"Name":"Class 1","TotalSales":28458,"People":88,"Sales":{"ThisYear":[500,600,500,400,800,1000,5000],"LastYear":[600,500,300,200,800,900,1500]}},
{"ProgramID":104,"Name":"Class 2","TotalSales":391.32,"People":82,"Sales":{"ThisYear":[200,300,500,300,600,800,1000],"LastYear":[500,400,300,600,800,700,2000]}}
]

这是我尝试设置的功能。我需要帮助解析基于特定值的所有对象(Class 1),我试图将ThisYear和LastYear放在chartJS设置中并存储其他值供我稍后在此函数的另一部分中使用,我还没有写了:

function getGraph(className) {

      $.getJSON("URL", { Name: +className}, function(data) {
          $.each(data, function(key, value){
             ??
          });
      });

      var name = className.replace(/\s+/g, '-').toLowerCase();
      var id = '#'+name;
      var id = $(id);
      var people = People.val
      var totalsales = TotalSales.val (ex. $200.00)
      var programID = ProgramID.val

      var data = {
          labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul"],
          datasets: [
              {
                  label: "Current",
                  backgroundColor: "#ccbcdd",
                  data: ThisYear.val
              },
              {
                  label: "Previous",
                  backgroundColor: "#b6d8b9",
                  data: LastYear.val
              }
          ],
          borderColor: 'transparent',
          strokeColor: '#ffffff',
          borderWidth: 0
      };

      var chart = new Chart(id, {
        type: 'bar',
        data: data,
        options: {
            legend: { display: false },
            barValueSpacing: 100,
            scales: {
                xAxes: [{
                    gridLines: {
                      display: false,
                    },
                }],
                yAxes: [{
                    display: false,
                    ticks: {
                        min: 0,
                    },
                    gridLines: {
                        display: false
                    }
                }]
            }
        }
  });

  getGraph('Class 1');

0 个答案:

没有答案