2016-09-02 29 views
0

私は棒(バー)のすぐ上のラベルだけでなく、バ​​ー自体(現在はdataLabelsを使用しています)にラベルを付けた水平の積み重ね棒グラフを作成しようとしています。 私が作成したJSFiddleは、私が達成しようとしているものに幾分似ています。この例では、ラベルをplotLineラベルを使用して配置していますが、Ajax呼び出しでバーのデータを取得すると、実際の使用例でバーを正しく配置する方法がわかりません。棒グラフ上のラベルだけでなく、棒グラフ上にもラベルを付けた横棒グラフを作成するにはどうすればよいですか?

JSFiddle

私はstackLabelsplotLineラベルなどplotBandラベルを試したが、無駄にしました。毎回バーの上にラベルを正しく配置するにはどうすればよいですか?

答えて

1

plotLinesの代わりにplotBandsを使用します。バンド内のアライメントをよりよくコントロールできます。このアライメントは、バー自体とグラフの同じ部分をカバーするように設定できます。

例。

あなた系列データを使用した:我々は、プロットとしてこの試合に系列の順序を作るために

var bands = [], 
    prevData = 0; 

$.each(series, function(i,ser) { 
    var point = ser.data[0], 
      name = ser.name; 
    bands.push({ 
     from: prevData, 
     to: (prevData + point), 
     color: 'rgba(255,255,255,0)', 
     label: { 
      text: name, 
      align: 'center' 
     } 
    }); 
    prevData = (prevData+point); 
}); 

:ループスルー

var series = [{ 
    name: 'John', 
    data: [5] 
    }, 
    { 
    name: 'Jane', 
    data: [2] 
    }, { 
    name: 'Joe', 
    data: [3] 
    }] 

我々はできるし、同じデータからplotBands配列を構築yAxisreversedStacks: fals eを設定する必要があります。デフォルトでは、Highchartsはシリーズの順序を逆にします。あなたはplotBandsラベルのプロパティの完全な機能セットを利用することができます。このように

yAxis: { 
    reversedStacks: false, 
    plotBands: bands 
} 

:その後、我々は我々の生成配列とplotBandsを取り込みます。

更新フィドル:

そして、これはあなたが([0] series.name、series.data)同じフォーマットを維持して、あなたが持っているしかし、多くのデータポイントを合わせるように調整:

あなたはこれについて行くことができるいくつかの他の方法には、同様にあります。

関連する問題