为什么不出现jquery图表

时间:2018-05-01 09:09:14

标签: javascript html ajax

我正在我的网站上构建一个条形图。我已经有几个图表工作,但它们都是在显示它们的同一页面的标题中定义和构建的。现在我将脚本移动到外部.js文件,但随后图表将不会显示。请参阅下面的代码。

jQuery的:

         var country_values = response[1][0];
        var country_months = response[2];
        console.log("TheMonths: " + JSON.stringify(country_months));
        console.log("Values: " + JSON.stringify(country_values));

          var careaChartData = {
          labels  : country_months, 
          datasets: [

        {
          label               : 'Rettssaker i fjor',
          fillColor           : 'rgba(210, 214, 222, 1)',
          strokeColor         : 'rgba(210, 214, 222, 1)',
          pointColor          : 'rgba(210, 214, 222, 1)',
          pointStrokeColor    : '#c1c7d1',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(220,220,220,1)',
          data                : [0, 0, 0, 0, 0, 0, 0]
        },
        {
          label               : 'Rettssaker i år',
          fillColor           : 'rgba(60,141,188,0.9)',
          strokeColor         : 'rgba(60,141,188,0.8)',
          pointColor          : '#3b8bba',
          pointStrokeColor    : 'rgba(60,141,188,1)',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(60,141,188,1)',
          data                : country_values
        }
        ]
    }

        var cbarChartCanvas                   =      $('#countrybarChart').get(0).getContext('2d')
        var cbarChart                         = new Chart(cbarChartCanvas)
        var cbarChartData                     = careaChartData
        cbarChartData.datasets[1].fillColor   = '#3c8dbc'
        cbarChartData.datasets[1].strokeColor = '#3c8dbc'
        cbarChartData.datasets[1].pointColor  = '#3c8dbc'
        var cbarChartOptions                  = {
        //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
        scaleBeginAtZero        : true,
        //Boolean - Whether grid lines are shown across the chart
        scaleShowGridLines      : true,
        //String - Colour of the grid lines
        scaleGridLineColor      : 'rgba(0,0,0,.05)',
        //Number - Width of the grid lines
        scaleGridLineWidth      : 1,
        //Boolean - Whether to show horizontal lines (except X axis)
        scaleShowHorizontalLines: true,
        //Boolean - Whether to show vertical lines (except Y axis)
        scaleShowVerticalLines  : true,
        //Boolean - If there is a stroke on each bar
        barShowStroke           : true,
        //Number - Pixel width of the bar stroke
        barStrokeWidth          : 2,
        //Number - Spacing between each of the X value sets
        barValueSpacing         : 5,
        //Number - Spacing between data sets within X values
        barDatasetSpacing       : 1,
        //String - A legend template
        legendTemplate          : '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].fillColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>'',
        //Boolean - whether to make the chart responsive
        responsive              : true,
        maintainAspectRatio     : true
}

      cbarChartOptions.datasetFill = false
      cbarChart.Bar(cbarChartData, cbarChartOptions)
      /* @Build the country bar graph end */

这是console.log

的输出
TheMonths: ["Jan","Feb","Mar","Apr","Mai","Jun","Jul","Aug","Sep","Okt","Nov","Des"]
  custom.js:101 Values:    {"jan":0,"feb":0,"mar":0,"apr":"12","mai":0,"jun":0,"jul":0,"aug":0,"sep":0,"okt  ":0,"nov":0,"des":0}

HTML:

  <div class="col-md-6">
      <div class="box" id ="countrychart">
        <div class="box-header with-border">            
          <div class="col-md-6"><h3 class="box-title email">Avholdte rettssaker i samme bransje</h3></div>              
          <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
            </button>
            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
          </div>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
          <div class="row">
            <div class="col-md-12">                 
              <div class="chart">                 
                <!-- Sales Chart Canvas -->
                <canvas id="countrybarChart" style="height: 180px;"></canvas>
              </div>
              <!-- /.chart-responsive -->
            </div>
          </div>
        </div>
      </div>
    </div>

我真的很感激任何意见或评论。 我知道代码不是最新的,但它应该仍然有用。

0 个答案:

没有答案