2016-07-05 149 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在评论中建议的那样。