2012-03-21 32 views
1

使用jqPlot,是否可以將點標籤限制爲一個系列?看下面的截圖!我想顯示的只是「實際」欄上方的值。 「平均」和「計劃」不應該顯示!jqplot - 限制點標籤顯示爲只有1個系列

謝謝!

 below

這裏是我的代碼

<script type="text/javascript"> 
     $(document).ready(function() { 

     $.jqplot.config.enablePlugins = true; 

     var trendline = [60000, 70000, 110000, 80000]; 
     var planned = [70000, 90000, 120000, 100000,]; 
     var actual = [80000, 80000, 150000, 120000]; 
     var xAxis = ['Jan', 'Feb', 'Mar', 'Apr']; 

     $(function() { 
      $.jqplot('chartDiv', [planned, actual, trendline], BarChart()); 
     }); 


     function BarChart() 
     { 
      var optionsObj = { 
       title: '', 
       axes: { 
        xaxis: { 
         renderer: $.jqplot.CategoryAxisRenderer, 
         ticks: xAxis,     
        }, 
        yaxis: { 
         tickOptions: { showMark: false, formatString: "%'d" },      
        }, 
       }, 

       legend: { 
        show: true, 
       }, 

       grid: { 
        borderColor: "#dad5d1", 
        background: "#dad5d1", 
        drawGridlines: false, 
        shadow: false 
       }, 

       series: [ 

        {label:'Planned',renderer:$.jqplot.BarRenderer}, 
        {label: 'Actual',renderer:$.jqplot.BarRenderer}, 
         {label: 'Mean', 


        pointLabels: { 
         show: true, 
         }, 

         renderer:$.jqplot.LineRenderer, 
          lineWidth:4, 
          markerOptions:{ 
           color: "#d87d12", 
           size:12, 
         }} 
        ], 

       seriesColors: [ "#ada195", "#4a4541", "#ff9619"], 

       seriesDefaults:{ 
        shadow: false, 

        rendererOptions:{ 
         barPadding: 0, 
         barMargin: 10, 
         barWidth: 25 
        } 

       }, 
      }; 
      return optionsObj; 
     } 
}); 

</script> 

回答

1

這實際上看起來就像在點標籤插件的錯誤。您可以通過禁用seriesDefault中的值(顯示:false)來解決此問題,然後打開您希望的系列中的值:

  series: [ 
      {label:'Planned',renderer:$.jqplot.BarRenderer}, 
      {label: 'Actual',renderer:$.jqplot.BarRenderer}, 
      {label: 'Mean', 
       pointLabels: { 
       show: true, 
       }, 
       renderer:$.jqplot.LineRenderer, 
       lineWidth:4, 
       markerOptions:{ 
        color: "#d87d12", 
        size:12, 
       }} 
      ], 


      seriesDefaults:{ 
       pointLabels:{show:false},      
       shadow: false, 
       rendererOptions:{ 
        barPadding: 0, 
        barMargin: 10, 
        barWidth: 25 
       } 
      }, 
+0

cool!讓我試試! ; o) – decbrad 2012-03-21 15:43:06

+0

嗨馬克!只是想再次表示感謝!這很有用!只需在「Planned」下移動pointLabel代碼即可。最終結果看起來非常像設計師的截圖要求。 ; O) – decbrad 2012-03-21 19:30:58