Question

我是Chart.js的新手，我正在处理下载Chart.js时包含的条样本。我阅读了文档，示例页面似乎做了一些不同的事情。我尝试遵循文档和在线教程没有成功，但是在示例页面上工作会产生更好的结果。

然而我似乎无法定制任何东西。我正在尝试将比例值设置为0，但它不适用。这种情况发生在我尝试做的所有事情上（字体颜色等等等）。这里的其余选项包含在文件和工作中。我不确定我做错了什么。

<head>
<title>Bar Chart</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="../dist/Chart.bundle.js"></script>
<style>
canvas {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
</style>
</head>

<body>
<div id="container" style="width: 75%;">
    <canvas id="canvas"></canvas>
</div>

<script>
    var barChartData = {
        labels: ["Week 1", "Week 2"],
        datasets: [{
            label: 'Round 1',
            backgroundColor: "rgba(220,220,220,0.5)",
            data: [12,15]
        }, {
            label: 'Round 2',
            backgroundColor: "rgba(151,187,205,0.5)",
            data: [20,17]
        }]

    };

    window.onload = function() {
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myBar = new Chart(ctx, {
            type: 'bar',
            data: barChartData,
            scaleOverride:true,
            scaleStartValue: 0, 

            options: {
                elements: {
                    rectangle: {
                        borderWidth: 2,
                        borderColor: 'rgb(0, 255, 0)',
                        borderSkipped: 'bottom'
                    }
                },
                responsive: true,
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: 'Chart.js Bar Chart'
                }
            }
        });

    };
</script>
</body>

Answer 1

您可以使用tick.beginAtZero

  options: {
    scales: {
      yAxes: [{
        ticks: {
            beginAtZero: true
        }
      }],
    },
    ...

小提琴 - http://jsfiddle.net/7mse8p9e/

无法自定义Chart.js

1 个答案: