Question

我有chart js条形图可正确显示数据但是我有两个格式问题似乎无法解决：

我希望所有固定的x轴标签与轴成90度（不是水平或利用自动旋转），我希望条形的颜色为绿色。我遵循了文档，但由于某种原因，我没有得到理想的结果。

    var barChartData = {
        labels: ['label 3', 'label 3', 'label 3'],
        datasets: [{
            fillColor: "rgba(0, 255, 0, 1.0)", 
            data: ["1", "2", "3"]
        }]
    };

var ctx2 = document.getElementById("allStudentsProg8").getContext("2d");
var myBar = new Chart(ctx2, {
    type: 'bar',
    data: barChartData,
    options: {
        elements: {
            rectangle: {
                borderWidth: 2,
                borderSkipped: 'bottom'
            }
        },
        responsive: true,
        legend: {
            display: false,
        },
        scales: {
            xAxes: [{
                ticks: {
                    minRotation: 90
                }
            }]
        }
    }
});

然而，这就是我得到的：

任何关于我做错事的指示都非常感激。

Answer 1

ChartJS v2.0

接下来改变：

颜色

         datasets: [{
            fillColor: "rgba(0, 255, 0, 1.0)",
            data: ["1", "2", "3"]
        }]

到

         datasets: [{
            backgroundColor: "rgba(0, 255, 0, 1.0)",
            borderColor: "#000",
            data: ["1", "2", "3"]
        }]

标签的旋转

            xAxes: [{
                ticks: {
                    minRotation: 90
                }
            }]

到

            xAxes: [{
                ticks: {
                    maxRotation: 0, //Do not change ticks width. Or increase              if you need to change also ticks.
                },
                afterCalculateTickRotation : function (self) {
                    self.labelRotation = 90; //Or any other rotation of x-labels you need.
                }
            }]

图表js选项不更改图表

1 个答案: