如何在条形图图表js中添加Y轴中的Label

时间:2017-06-14 09:04:31

标签: javascript jquery chart.js adminlte

我正在使用admin lte主题来显示图表,但我想在y轴上显示门票数量。

如何添加我也使用选项代码,但它不起作用请帮我解决如何显示消息

这是我的代码

<script>
$(function () {
/* ChartJS
* -------
* Here we will create a few charts using ChartJS
*/

//--------------
//-------------
//- BAR CHART -
//-------------
var barChartCanvas = $("#barChart").get(0).getContext("2d");
var barChart = new Chart(barChartCanvas);

var barChartData = {
labels: <?php echo json_encode($namelabel) ?>,
datasets: [
{
label: "Total Created",
fillColor: "#f39c12",
strokeColor: "rgba(210, 214, 222, 1)",
pointColor: "rgba(210, 214, 222, 1)",
pointStrokeColor: "#c1c7d1",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: <?php echo json_encode($idlabel) ?>
},
]
};


barChartData.datasets[1].fillColor = "#00a65a";
barChartData.datasets[1].strokeColor = "#00a65a";
barChartData.datasets[1].pointColor = "#00a65a";
var barChartOptions = {
//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
};

barChartOptions.datasetFill = false;
barChart.Bar(barChartData, barChartOptions);
});
</script>

0 个答案:

没有答案