我正在我的网站上构建一个条形图。我已经有几个图表工作,但它们都是在显示它们的同一页面的标题中定义和构建的。现在我将脚本移动到外部.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>
我真的很感激任何意见或评论。 我知道代码不是最新的,但它应该仍然有用。