Question

在ChartJS的文档页面上，确实有一个与我的问题相对应的部分，但我无法理解其instruction。它写道：

如果使用全局配置，则标签将从以下其中之一绘制：   图表数据中包含的标签数组。如果只有data.labels是   定义，将使用。如果定义了data.xLabels并且轴为   水平，将使用。同样，如果data.yLabels被定义   并且轴是垂直的，将使用此属性。同时使用   xLabels和yLabels一起可以创建使用字符串作为   X和Y轴。

指定以上任何设置将x轴定义为类型：   类别，如果没有其他定义。为了更精细地控制   类别标签，也可以将标签添加为   类别轴定义。这样做不会应用全局默认值。

这是我尝试过的：

var options = {
    type: "line",
    data: {
        datasets: [{
            label: "My First Dataset",
            data: [{
                x: 'January',
                y: 'A'
            }, {
                x: 'March',
                y: 'B'
            }],
            fill: false,
            borderColor: "rgb(75, 192, 192)",
            lineTension: 0.1
        }]
    },
    options: {
        scales: {
            xAxes: [{
                type: 'category',
                labels: ['January', 'February', 'March', 'April', 'May', 'June'],
            }],
            yAxes: [{
                type: 'category',
                labels: ["A", "B", "C"],
            }]
        }
    }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
    <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>

还有这个：

var options = {
    type: "line",
    data: {
        xLabels: ["January", "February", "March", "April", "May", "June"],
        yLabels: ["A", "B", "C"],
        datasets: [{
            label: "My First Dataset",
            data: [{
                x: 'January',
                y: 'A'
            }, {
                x: 'March',
                y: 'B'
            }],
            fill: false,
            borderColor: "rgb(75, 192, 192)",
            lineTension: 0.1
        }]
    },
    options: {}
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
    <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>

不幸的是，这些都不起作用。

Answer 1

最后，经过反复试验，我得到了解决方案。我不得不说chart.js的文档还不清楚，应该加以改进。

我的发现是：

xLabels和yLabels方法不起作用。这两个参数没有明确的文档。
不在乎将type设置为category。 chart.js仅接受数值；您必须使用自己的回调方法将值映射到字符串。

var options = {
    type: "line",
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June'],
        datasets: [{
            label: "My First Dataset",
            data: [1, 2, 3, 1, 1, 1],
            fill: false,
            borderColor: "rgb(75, 192, 192)",
            lineTension: 0.1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    max: 3,
                    min: 1,
                    stepSize: 1,
                    callback: function(label, index, labels) {
                        switch (label) {
                            case 1:
                                return 'A';
                            case 2:
                                return 'B';
                            case 3:
                                return 'C';
                        }
                    }
                }
            }]
        }
    }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
    <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>

如何创建同时使用X和Y轴字符串的图表？

1 个答案: