Question

我是chart.js的新手。我想绘制一个条形图，其中x轴标签不居中，但是在两个条形连接的位置。这就是我需要创建的

https://i.imgsafe.org/12dcb3ea20.png

但是在我当前的实现中（在下图中），标签以条形为中心。我需要标签位于两个条连接的中间位置，如上图所示。

https://i.imgsafe.org/12e75a5888.jpg

这是我的代码

    window.onload = function() { 
        init();
    };

    function init() {
        var ctx = $("#myChart").get(0).getContext("2d");

        var data = {
            labels: ["0%", "10%", "20%", "30%", "40%", "50%", "60%", "70%", "80%", "90%", "100%"],
            datasets: [
            {
                label: "My First dataset",
                fillColor : "rgba(0, 173, 165, 1)",
                backgroundColor: "rgba(255,99,132,0.2)",
                borderColor: "rgba(255,99,132,1)",
                borderWidth: 1,
                hoverBackgroundColor: "rgba(255,99,132,0.4)",
                hoverBorderColor: "rgba(255,99,132,1)",
                data: [5, 22, 30, 22, 26, 40, 60, 68, 40, 10],
            }
            ]
        };

        var myNewChart = new Chart(ctx).Bar(data);
    }

</script>
<div>
    <section>
        <article>
            <canvas id="myChart" width="800" height="200">
            </canvas>
        </article>
    </section>
</div>

Answer 1

尝试添加以下选项：

options : {
    scales : {
        xAxes : [{
            gridLines: {
                offsetGridLines : true
            }
        }]
    }
}

Chart.js条形图更改标签位置X轴

1 个答案: