2011-10-25 63 views
1

jqplotに問題があり、積み上げチャートにデータラベルを配置しています。jqplotと積み上げチャートデータラベル

私は列ごとに3つのデータ値をグラフ化しています。問題は、データ値の1つが、隣接するデータ値のデータラベルと重複する1%のように非常に小さい場合です。

私はここに画像をアップロードした:私がやりたい何 http://img84.imageshack.us/img84/1305/capturell.jpg

は、各小節の途中でデータラベルを配置することが可能です。これは可能ですか?

plot1 = $.jqplot(id, data, { 
    seriesDefaults:{ 
     renderer:$.jqplot.BarRenderer, 
     rendererOptions: { 
     fillToZero: true, 
      highlightMouseOver: false, 
     highlightMouseDown: false, 
     highlightColor: null, 
     barDirection: 'horizontal' 
     }, 
     pointLabels: { show: true, location: 'e', edgeTolerance: -15 } 
    }, 
    title:{text: title,fontSize: 16}, 

    series:[ 
     {label: data_labels[0] }, 
     {label: data_labels[1]} 

    ], 
    seriesColors: [ "#4879a6", "#d9321d"], 

       // Rotate the bar shadow as if bar is lit from top right. 
    shadowAngle: 135, 

    axes: { 
     xaxis: { 
     min: 0, 
     max: 100, 
     tickInterval: 20, 
     tickOptions: {formatString: '%d\%' ,fontSize: 14} 
     }, 
     yaxis: { 
     renderer: $.jqplot.CategoryAxisRenderer, 
     ticks: ticks, 
     tickOptions: {fontSize: 14} 
     } 
    } 
+0

jqplotをあまり使わないでください。しかし、2つのポイント:1.なぜあなたは負のエッジ許容値を持っていますか? 2.あなたはjqplotのレンダラーの "dataLabelNudge"プロパティを試すことができます – Raghav

+0

こんにちはSrini - 私はエッジの許容値で遊んでいました。それは本当に物事に影響を与えないので、データラベルはチャートの端の近くにあります。 – user1013543

+0

"dataLabelNudge"プロパティは、PieとDonutのチャートにしかないと思います。 – user1013543

答えて

2

をseriesDefaultsはちょうどそのすでに定義されていないシリーズのすべてのインスタンスに同じ値を渡すことに注意してください:ここで

は、私が使用していたコードです。そう...

seriesDefaults:{pointLabels: {show: true, stackedValue: false, location:'s'}}, 

は、彼がこの一例を示しているjqplotsサイト上

series:[ 
      {pointLabels: {show: true, stackedValue: false, location:'s'}},   
      {pointLabels: {show: true, stackedValue: false, location:'s'}}, 
      {pointLabels: {show: true, stackedValue: false, location:'s'}}    
      ] 

と同じです。 http://www.jqplot.com/deploy/dist/examples/point-labels.html

これは、y-パディングと呼ばれる値を示し、pointLabelsに渡されます。これは、そのトリックを行う必要があります。同じ例では、jqplotに渡されるデータ配列内にカスタムポイント値マーカーを渡す方法を示します。あなたがデータマーカをスタイルするために横にいくつかのHTMLを滑らせることができれば、それは私に衝撃的ではありません。

var data = [[x,y,tooltipValue],[x,y,null]];  

これが役立つか、少なくとも正しい方向を指すようにします。

1

試してみるdataLabelPositionFactor proprety

関連する問題