2016-07-05 146 views
-2

我已經創建了一個水平棒圖與對數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

截至目前唯一的辦法似乎是,層疊具有無形的圖表作爲x軸(如建議here)填充條形圖,它工作得很好。

也可能有一個多軸解決方案,正如@Arathi在評論中建議的那樣。