如何将JSON数据用作chartjs数据?

时间:2018-04-21 23:26:56

标签: javascript json charts chart.js

在我的控制器中,我有一个Action方法,可以在一个名为Questions的表中找到所有问题,以及每个问题的答案。此Action的类型为ContentResult,它将返回以Json格式序列化的结果。

public ContentResult GetData()
        {
            foreach (var question in datalistQuestions)
            {
                 //queries
            } 
            return Content(JsonConvert.SerializeObject(questionlist), "application/json");    
        }

这是回归:

[{"countAgree":1,"countSomewhatAgree":0,"countDisagree":1},
{"countAgree":0,"countSomewhatAgree":1,"countDisagree":1},
{"countAgree":0,"countSomewhatAgree":1,"countDisagree":1}]

我想为每个问题显示一个图表。当我使用硬编码数据集时创建动态图表。 JSFIDDLE 但是如何获取此json数据并将其用作我的图表的数据集?

1 个答案:

答案 0 :(得分:0)

将您的数据作为对象。考虑键是标签,对象中的值是点。然后绘制图表。使用此代码。

data = {"countAgree":1,"countSomewhatAgree":0,"countDisagree":1,
"countAgree":0,"countSomewhatAgree":1,"countDisagree":1,
"countAgree":0,"countSomewhatAgree":1,"countDisagree":1};

const CHART = document.getElementById('lineChart');

var lineChart = new Chart(CHART, {
type: 'line',
data: {
  labels: Object.keys(data),
  datasets: [{
     label: 'My first dataset',
     fill: false,
     lineTension: 0,
     backgroundColor: "rgba(75,192,192,0.4)",
     borderColor: "rgba(75,192,192,1)",
     borderCapStyle: 'butt',
     borderDash: [],
     borderDashOffset: 0.0,
     borderJointStyle: 'miter',
     data: Object.values(data)
  }]
  }
 })