在jsp页面中创建chartjs时出错

时间:2018-03-29 07:05:26

标签: javascript java ajax jsp chart.js

我正在尝试使用jsp页面中的chartjs javascript框架创建条形图。 Chartjs从json文件中获取输入 data:[] 值。这是我的 jsp页面的代码。

<section id="main">
      <div class="container">
 		
        <%
          String sentiment = (String)request.getAttribute("SENTIMENT_RESULT");
        
        %>
       
        
        <div id="result-container">
            <p id="result">
              <%= sentiment %>
 
             
            </p>
                <a href="getProduct" class="btn btn-outline-  secondary btn-lg btn-block">Back to the list</a>
        </div>
        
        <div id="graph-container">
        	<canvas id="mycanvas"></canvas>
        </div>
    
      </div>

    </section>
<script type="text/javascript" src="app.js"></script>

app.js 的代码如下:

$(document).ready(function(){
	$.ajax({
		url: "graph_values.json",
		method: "GET",
		success: function(data) {
			console.log(data);
            var positive_percent = data.positive_percent;
            console.log(positive_percent);
            var negative_percent = data.negative_percent;
            console.log(negative_percent);

  

        var myChart = document.getElementById('mycanvas').getContext('2d');
             // Global Options
        Chart.defaults.global.defaultFontFamily = 'Lato';
        Chart.defaults.global.defaultFontSize = 18;
        Chart.defaults.global.defaultFontColor = '#777';

        var analysisChart = new Chart(myChart, {
            type:'bar', // bar, horizontalBar, pie, line, doughnut, radar, polarArea
            data:{
              labels:['Positive', 'Negative'],
              datasets:[{
                label:'Analysis',
                data:[
                  positive_percent,
                  negative_percent,
                ],
                //backgroundColor:'green',
                backgroundColor:[
                    'rgba(54, 162, 235, 0.6)',
                    'rgba(255, 99, 132, 0.6)',
                  
  
                ],
                borderWidth:1,
                borderColor:'#777',
                hoverBorderWidth:3,
                hoverBorderColor:'#000'
              }]
            },
            options:{
                title:{
                  display:true,
                  text:'Analysis',
                  fontSize:25
                },
                legend:{
                  display:false,
                  position:'right',
                  labels:{
                    fontColor:'#000'
                  }
                },
                layout:{
                  padding:{
                    left:50,
                    right:0,
                    bottom:0,
                    top:0
                  }
                },
                tooltips:{
                  enabled:true
                }
              }
            });
		},
        
		error: function(data) {
			console.log(data);
		}
	});
});

以下是我想要插入值的 graph_values json文件:

{"negative_percent":15.310099999999998,"positive_percent":84.6899}

我在firefox控制台中收到此错误:

 TypeError: t is undefined[Learn More]    util.js:45:11
   {"negative_percent":15.310099999999998,"positive_percent":84.6899}
    XML Parsing Error: not well-formed
    Location: http://localhost:8080/BeProject/graph_values.json
    Line Number 1, Column 1:
    graph_values.json:1:1

我是ajax和javascript的新手。我不知道这有什么问题。

0 个答案:

没有答案