2016-07-05 10 views
-2

I対数x軸と水平のバーグラフを作成した:Chart.jsで浮動水平棒グラフのy開始点を定義していますか?

var ctx = document.getElementById("myChart"); 
var myChart = new Chart(ctx, { 
    type: 'horizontalBar', 
    data: { 
     labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
     datasets: [{ 
      label: '# of Votes', 
      data: [1000000000, 100000000, 10000000, 1000000, 100000, 1000], 
      backgroundColor: [ 
       'rgba(255, 99, 132, 0.2)', 
       'rgba(54, 162, 235, 0.2)', 
       'rgba(255, 206, 86, 0.2)', 
       'rgba(75, 192, 192, 0.2)', 
       'rgba(153, 102, 255, 0.2)', 
       'rgba(255, 159, 64, 0.2)' 
      ], 
      borderColor: [ 
       'rgba(255,99,132,1)', 
       'rgba(54, 162, 235, 1)', 
       'rgba(255, 206, 86, 1)', 
       'rgba(75, 192, 192, 1)', 
       'rgba(153, 102, 255, 1)', 
       'rgba(255, 159, 64, 1)' 
      ], 
      borderWidth: 1 
     }] 
    }, 
    options: { 
     scales: { 
           xAxes: [{ 
         type: 'logarithmic', 
         position: 'bottom', 
         ticks: { 
          userCallback: function(tick) { 
           var remain = tick/(Math.pow(10, Math.floor(Chart.helpers.log10(tick)))); 
           if (remain === 1 || remain === 5) { 
            var test = tick.toString(); 
             if(test >= 1000 && test < 1000000){ 
              return tick/1000 + "kHz"; 
             }else if(test >= 1000000 && test < 1000000000){ 
              return tick/1000000 + "MHz"; 
             }else if(test >= 1000000000){ 
              return tick/1000000000 + "GHz"; 
             }else { 
              return tick.toString() + "Hz"; 
             } 



           } 
           return ''; 
          }, 
         }, 
         scaleLabel: { 
          labelString: 'Frequency', 
          display: true, 
         } 
        }] 
       } 
    } 
}); 

しかし、私は出発点を定義できるようにすることができないよう、全ての棒グラフは、y 0で発信します。

Charts.jsで可能だったのかどうか疑問に思っていました。もしそうなら、私はドキュメントやgitで何かを見つけることができないようですいずれかに助けた。

Here is what I have right now.

Here is what I would like to have.

+0

棒グラフに必要なデータは配列のみであるため、解決策が見つからないようです。それが出発点の値を許していれば、多分そうかもしれませんが、そうではないようです。多軸棒グラフが役立ちます。 –

+0

私はより簡単に見える回避策を見つけましたが、提案のおかげで多軸もうまくいきました。 – Aardi

+0

私はスタックチャートオプションを見ましたが、あなたはそれぞれのバーに異なる色を付けることができなかったのです。だから私は多軸オプションを提案した。 –

答えて

0

今のように唯一の方法は、それはかなりうまく動作します(hereを示唆したように)、x軸上のパディングなど目に見えないチャートと棒グラフを積み重ねているように見えます。

コメントに@Arathiで示唆されているように、おそらく多軸の解決策があります。

関連する問題