jqplot在條形圖上顯示趨勢線

任何人都可以告訴我我需要用下面的代碼來顯示一個趨勢線在我的條形圖上。謝謝！jqplot在條形圖上顯示趨勢線

我正在使用JqPlot插件。這是迄今爲止的代碼...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <script language="javascript" type="text/javascript" src="excanvas.min.js"></script> 
    <script language="javascript" type="text/javascript" src="jquery-1.3.2.min.js"></script> 
    <script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script> 
    <script language="javascript" type="text/javascript" src="jqplot.categoryAxisRenderer.min.js"></script> 
    <script language="javascript" type="text/javascript" src="jqplot.barRenderer.min.js"></script> 


    <link rel="stylesheet" type="text/css" href="jquery.jqplot.css" /> 

    <script type="text/javascript"> 
     var planned = [70000,90000,120000,100000,]; 
     var actual = [80000,80000,150000,120000]; 
     var xAxis = ['Jan', 'Feb', 'Mar', 'Apr']; 
     $(function() { 
      $.jqplot('chartDiv', [planned, actual], BarChart()); 
     }); 


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

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

       series: [ 
        {label:'Planned'}, 
        {label: 'Actual'} 
        ], 

       legend: { 
        show: true, 
        location: 'sw', 
        xoffset: -70, 
        yoffset: -22, 
        }, 

       seriesDefaults:{ 
        shadow: false, 
        renderer:$.jqplot.BarRenderer, 
        rendererOptions:{ 
         barPadding: 0, 
         barMargin: 10, 
         barWidth: 25, 
        } 

       }, 
      }; 
      return optionsObj; 
     } 


    </script> 

</head> 

<body> 

<div> 
    <div id="chartDiv" /> 
    </div> 
</div> 
</body> 
</html>

正如你所看到的我還有一些工作還在做！最上面的圖像是我目前的位置，最下面的圖像是我完成後希望看到的樣子！

圍繞邊緣的絨毛是簡單的CSS東西！

enter image description here

來源

2012-03-19 decbrad

你的趨勢線代表什麼？從你的例子情節看起來像是計劃的中點？ – Mark 2012-03-19 22:43:38

下面是一個例子，其中「趨勢線」是的計劃和實際，繪製成一條線在柱狀圖平均值：

enter image description here

我所做的只是添加趨勢數據的第三個系列。在系列選項中，我將「渲染器」設置爲禁止兩個小節系列，而將第三個作爲默認行。小提琴here（你必須緩存JS文件，因爲jqplot不允許盜鏈）。

var planned = [70000,90000,120000,100000,]; 
    var actual = [80000,80000,150000,120000]; 
    var trend = [75000, 85000, 140000, 110000]; 
    var xAxis = ['Jan', 'Feb', 'Mar', 'Apr']; 

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


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

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

      series: [ 
       {label:'Planned',renderer:$.jqplot.BarRenderer}, 
       {label: 'Actual',renderer:$.jqplot.BarRenderer}, 
       {label: 'Mean of Planned and Actual'} 
       ], 

      legend: { 
       show: true, 
       location: 'nw' 
       }, 

      seriesDefaults:{ 
       shadow: false, 

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

      }, 
     }; 
     return optionsObj; 
    }

來源

2012-03-19 22:51:02 Mark

嗨馬克，太棒了！感謝您的指導！管理得到它看起來差不多像截圖一樣...乾杯！ – decbrad 2012-03-21 03:13:43

嗨馬克，現在接受爲正確的！感謝您的領導！ – decbrad 2012-03-21 15:06:51

再次馬克！也許你可以幫忙！我試圖限制顯示在網格中的點標籤的數量！也許你知道如何？感謝您的幫助！ http://stackoverflow.com/questions/9807451/jqplot-limiting-point-labels-displayed-to-just-1-series – decbrad 2012-03-21 15:16:38

jqplot在條形圖上顯示趨勢線

回答

相關問題