创建了一个图表,其中包含带有绘制线条和饼图的条形图。我正在尝试为条形图动态获取值,但它没有显示.Have上传了条形图/柱形图未显示的图片,折线图显示了值的声明位置。给予帮助。
<!-- Vf page-->
<apex:page controller="HighchartsController">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin:0 auto"></div>
<script>
$(function () {
$('#container').highcharts({
title: {
text: 'Chart showing opportunities'
},
xAxis:{
categories: ['Jan','Feb','Mar','Apr','May']
},
labels: {
items: [{
html: 'Opportunities',
style: {
left: '50px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
series: [ {
type: 'column',
name: 'Indian Railways',
data: "[{!nvs}]" // values coming from controller and here i need to fetch it.
},
{
type: 'spline',
name: 'Monthly Sales', // Average
data: [3, 2.67, 3, 6.33, 3.33],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
},
{
type: 'pie',
name: 'Total consumption',
data: [ {
name: 'Lost',
y:23,
sliced:true,
selected:true,
color: Highcharts.getOptions().colors[1] // Opp's Lost color
},
{
name: 'Won',
y:19,
color: Highcharts.getOptions().colors[2] // Opp's won color
}],
center: [100, 80],
size: 100,
showInLegend: false,
dataLabels:
{
enabled:true
}
}]
});
});
</script>
</apex:page>
//Apex class
public class HighchartsController
{
// for bar chart
// N for name , v for data
public class Nv {
public String n { get; private set; }
public integer v { get; private set; }
Nv(String n,Integer v) {
this.n = n;
this.v = v;
}
}
public Nv[] getnvs() {
return new Nv[] {
new Nv('Jan',5),
new Nv('Feb',45),
new Nv('Mar',35),
new Nv('Apr',25) ,
new Nv('may',15)
};
}
}
Highly appreciate the help.