发表新帖
发表新帖

chartjs : how to set custom scale in bar chart

后端 未结
关注
3 1628
眼角桃花
眼角桃花 2020-12-31 07:47

Chartjs is a pretty excellent open source tool, but had a quick question about a bar chart I\'m trying to create. Given this chart data:

    var chartData =
相关标签:
3条回答
  • 忘了有多久
    2020-12-31 08:20

    Also include scaleStartValue and scaleStepWidth as stated in docs.

    Example

    This example creates a bar chart with Y-axis starting at 0 and ending at 900. To do that, step width is set to 100 and number of steps are set to 9.

    HTML

    <!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
    <body>
      <canvas id="income" width="600" height="400"></canvas>
    </body>
</html>

    JS

    var barData = {
    labels : ["January","February","March","April","May","June"],
    datasets : [
        {
            fillColor : "#48A497",
            strokeColor : "#48A4D1",
            data : [456,479,324,569,702,600]
        },
        {
            fillColor : "rgba(73,188,170,0.4)",
            strokeColor : "rgba(72,174,209,0.4)",
            data : [364,504,605,400,345,320]
        }

    ]
};

var income = document.getElementById("income").getContext("2d");

new Chart(income).Bar(barData, {
  animation:false,
  scaleOverride:true,
  scaleSteps:9,
  scaleStartValue:0,
  scaleStepWidth:100
});
    0 讨论(0)
  • 一生所求
    2020-12-31 08:26 
    var myChart = new Chart(ctx, {
                type: 'bar',
                data:data,
                options: {
                    responsive: true,
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true,
                                steps: 10,
                                stepValue: 6,
                                max: 60 //max value for the chart is 60
                                }
                            }
                        }]
                    }
                }
            });
    0 讨论(0)
  • 执笔经年
    2020-12-31 08:42

    @2.8.0 custom y-axis setup. You only need range min/max and with stepSize you control the axis.

    ...
yAxes: [{
        ticks: {
            stepSize: 0.1,
            min: 2,
            max: 2.5
            },
        gridLines: {
            display: false 
            },
        stacked: false
                    }]
 ...
    0 讨论(0)
 看不清?
提交回复
热议问题