javascript - 如何在html中自定义柱形图

Question

目前我正在使用 chart.js 但无法制作如下图表

其中条形图位于虚线上。

我是这样用的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>

Answer 1

Codepen http://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,