jqplotはbarchartにトレンドラインを表示します

誰でも私のbarchart上にトレンドラインを表示するには、以下のコードで行う必要があることを教えてください。ありがとう！jqplotはbarchartにトレンドラインを表示します

私は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

はここで、「トレンドライン」は、計画と実績の平均値である一例ですが、棒グラフの上にラインとしてプロット：私は

enter image description here

すべてでしたトレンドデータを含む第3シリーズを追加します。シリーズのオプションでは、2つの棒グラフのバーに「レンダラー」を設定し、3つ目をデフォルトの線にします。 Fiddle here（jqplotはホットリンクを許可していないので、JSファイルをキャッシュする必要があります）。

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

こんにちはマーク、今すぐ正解！ヘッドアップをありがとう！ – decbrad

こんにちはマーク！多分あなたは助けることができます！私は、グリッドに表示されるポイントラベルの数を制限しようとしています！多分あなたはどのように知っていますか？あなたのすべてのおかげで、ありがとう！ http://stackoverflow.com/questions/9807451/jqplot-limiting-point-labels-displayed-to-just-1-series – decbrad

jqplotはbarchartにトレンドラインを表示します

答えて

関連する問題