Highcharts - 使值变为动态而非静态

时间:2014-07-10 18:09:16

标签: javascript dynamic highcharts

创建了一个图表,其中包含带有绘制线条和饼图的条形图。我正在尝试为条形图动态获取值,但它没有显示.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.

0 个答案:

没有答案