2015-10-20 48 views
2

目前我使用chart.js之而不能夠做出像圖表以下如何自定義柱形圖在HTML

enter image description here

其中酒吧在虛線上。

我用這樣的JSFIDDLE

請建議我一些資源,使我能夠產生精確副本

以下是javascipt的我使用

<canvas id="myChart" width="100" height="100" padding-right="20px"></canvas> 
    <script> 
     var data = { 
     labels: ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"], 
     datasets: [ 
      { 
       label: "My First dataset", 
       fillColor: "rgba(51,190,139,1)", 
       strokeColor: "rgba(51,190,139,1)", 
       highlightFill: "rgba(51,190,139,1)", 
       highlightStroke: "rgba(51,190,139,1)", 
       data:[1000,1250,750,1160,500,1500,850], 
      } 
     ] 
     }; 

     var ctx = document.getElementById("myChart").getContext("2d"); 
     var myBarChart = new Chart(ctx).Bar(data,{ 
     responsive: true, 
     barValueSpacing : 10, 

     }); 

    </script> 
+0

你有沒有試過flotr2? https://github.com/HumbleSoftware/Flotr2 – EL3PHANTEN

回答

0

Codepenhttp://codepen.io/noobskie/pen/vNpgGe?editors=101

你在找這樣的事嗎?

function(label){return ' €' + label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");}

這是你需要使用更改標籤,然後就調整barValueSpacing: 40,任何你需要的功能

編輯

更新codepen所以現在你也可以浪費時間與你在Y軸上的標籤數量通過

scaleOverride : true, 
scaleSteps : 10, 
scaleStepWidth : 150, 
scaleStartValue : 0,