Question

我希望能够将tick值映射到Chart.js中的字符串。

在文档（https://www.chartjs.org/docs/latest/developers/axes.html?h=converttick）中，我找到了函数

// Transform the ticks array of the scale instance into strings. The default implementation simply calls this.options.ticks.callback(numericalTick, index, ticks);
convertTicksToLabels: function() {}

是否有一个例子（如何以什么格式）/在哪里写这个函数？

我认为它应该写在选项中......这是我的代码：

    chart = new Chart(ctx, {
    type: 'bubble',
    data: dataObj,
    options: {
        scales: {
            yAxes: [{ 
                ticks:{display: false},
                gridLines:{display:false}

            }],
            xAxes: [{ 
                ticks:{display: true},
                gridLines:{display:false},
                convertTicksToLabels: function() {//what goes in here?}
            }]
          }
    }
});

到目前为止，我只找到了关于不使用此函数的displaying formatted lines on an axis和overriding the calculateXLabelRotation function的答案，它不涉及将字符串映射到刻度值（仅返回一个标签旋转）。

Answer 1

我发现了一种不使用函数将值映射到字符串的不同方法。

我使用了callback密钥而不是convertTicksToLabels函数。

现在是我的代码......

      chart = new Chart(ctx, {
        type: 'bubble',
        data: dataObj,
        options: {
            scales: {
                yAxes: [{ 
                    ticks:{
                        display: true,
                        callback: function(value, index, values) {
                            return mapValtoString(value);
                        }
                    },
                    scaleLabel: {labelString: "Factualness"},
                    gridLines:{display:false}
                }],
                xAxes: [{ 
                    ticks:{display: false},
                    scaleLabel: {labelString: "Bias"},
                    gridLines:{display:false}
                }]
              }
        }
    });

mapValToString()函数看起来像这样......

function mapValtoString(val){
    switch(val){
        case 1:
            return "LOW";
            break;
        case 2:
            return "MEDIUM";
            break;
        case 3:
            return "HIGH";
            break;  
        default:
            return "";
    }

我返回我想要的值与一个值相关联的字符串以及不需要的值的空白字符串。

这解决了我的问题，图表现在显示字符串而不是数字值。

如何覆盖convertTicksToLabels chartjs函数

1 个答案: