在asp.net mvc中需要帮助Chart.js

时间:2016-09-10 20:22:03

标签: javascript asp.net-mvc

几天可以制作图表,我们需要您的指导。

箭头显示对象,但在图表上不显示任何内容。搜索没有成功。

我的模特:

raco pkg migrate

我的控制器:

var data = [ 
              {
                "id":"1",
                "name":"Ali",
                "BOD":"29/10/2055",
                "type":"primary",
                "email":null,
                "mobile":"010100000000",
                "notes":["note1" ,"note2.nett" ,"note3"]
              },
               {
                "id":"2",
                "name":"Tie",
                "BOD":"29/10/2055",
                "type":"primary",
                "email":"b@v.net",
                "mobile":"0100000000",
                "notes":["note4" ,"note5" ,"note6"]
              }
  ];

    /**
     * query: query string to match with
     * dataArray: data array variable, array or opject to search it
     **/
   function search(query,dataArray){
     // search code go here
     //console.log(query);
     var matched = [];
     //init null values
     if(!dataArray)dataArray={};
     if(!query)query='';
     dataArray.forEach(function(obj,index){
        for(var key in obj){
          if(!obj.hasOwnProperty(key) || !obj[key]) continue;
          if(obj[key].toString().indexOf(query) !== -1)
            {
              matched.push(obj );
            } 
        }
     });
     return matched ;      
     }

   // search examples .
  console.log("found",search('.net',data).length);//expected data[0] data[1]
  console.log("found",search('Ali',data).length);//expected data[0]
  console.log("found",search('0116',data).length);//expected data[0],data[1] 

可能是调用数据的脚本中的主要问题。虽然控制器可能没有正确配置输出数据,但是很乐意为您提供帮助。

我的观点:

public class Voting
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int Voice { get; set; }
    public DateTime DateVote { get; set; }
    public string IpAdress { get; set; }
}

1 个答案:

答案 0 :(得分:0)

您的代码几乎没有问题!首先,在@Autowired EnvironmentController environmentController; ... Environment labelled = environmentController.labelled("application", "remote", "v1"); Map<?, ?> keyValues = labelled.getPropertySources().get(0).getSource(); 内,您正试图访问$.each labels的{​​{1}}属性。但是你没有定义myChart变量是什么。所以你将得到一个未定义的错误!

要考虑的另一件事是,你的ajax调用是异步的。获取数据可能需要很长时间。因此,无论何时获取数据,都需要执行代码以使用该数据呈现图表。我建议你将该代码移到一个方法中,并在你的ajax调用的成功/完成事件中调用该方法。

这应该有用。

myChart

现在在你的ajax调用完成事件中,你可以将标签数组和数据数组传递给RenderChart方法。

function renderChart(labels, voice) {
    var ctx = document.getElementById("ChartVote");
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: '# of Votes', data: voice,
                backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {   beginAtZero: true  }
                }]
            }
        }
    });
}