ChartJS选项,刻度被完全忽略

wsewodh2  于 2022-11-07  发布在  Chart.js
关注(0)|答案(1)|浏览(204)

我试着制作一个图表,沿着x轴是年份,y轴是美元金额。我终于接近了我所寻找的,但我发现,因为x坐标是数字,ChartJS是把逗号在他们看起来真的很奇怪的年份。
经过一番研究,我使用了callbacks.options.plugin.tooltip.callbacks.label,它可以让我删除工具提示中的逗号,但是当我使用options.scales.x[0].ticks.callback尝试修复底部的标签时,它不仅不起作用,但是我没有看到console.log语句,所以它看起来甚至没有调用回调。根据我在网上和Stack Overflow上找到的内容,我尝试了几种不同的回调方法,我认为这与ChartJS在不同版本中执行此操作的不同方式相对应。(我使用的是3.5.1版本。)
然后,我意识到...... options.scales下的选项似乎都没有任何效果。我更改min、标题、刻度设置(颜色为红色、回调等),它们都没有任何效果。(这也解释了为什么我在使用折线图时遇到麻烦,不得不切换到散点图;显然,当我将其设置为type: 'date'或其他确切的工作方式时,type: 'linear'并没有被选中,也没有做任何不同的事情。)
与此同时,其他选项,如options.showLineoptions.elements确实有影响,我看到了图表,但在控制台中没有得到任何错误。因此,它选择了这些选项,只是忽略了我在options.scales中的所有内容。
下面是相关代码:

// Sample data added to make this example self-contained
    // This is my internal data format
    let data = {
        "Series1": [ {x: 2001, y: 100 },  {x: 2002, y: 110 },  {x: 2003, y: 107 }, ],
        "Series2": [ {x: 2001, y: 107 },  {x: 2002, y: 102 },  {x: 2004, y: 95 }, ],
    }

    // Define data //////////////////////////////////////////////////////
    // I convert data to format ChartJS wants and add a few options
    let datasets = [];
    for(let label in data) {
        let c = colorIterator.next().value
        datasets.push({
            label: label,
            data: data[label],
            backgroundColor: c,
            borderColor: c,
        });
    }

    // Define options //////////////////////////////////////////////////////
    let chartConfig = {
        type: 'scatter',
        data: { datasets: datasets, },
        options: {
            title: { display: false },
            indexAxis: 'x', responsive: true, maintainAspectRatio: false,
            showLine: true,
            elements: {
                line: { display: true, tension: 0, borderWidth: 1, fill: false, },
                point: { radius: 3 }
            },
            interaction: { mode: 'x', },
            scales: {
                x: [{
                    type: 'linear',
                    min: 1995, max: (new Date()).getFullYear()+1, stepSize: 1,
                    title: { display: true, text: 'Year' },
                    ticks: {
                        display: true,
                        major: { enabled: true },
                        color: 'red',
                        callback: function(value, index, ticks) {
                            console.log(value);
                            return Chart.Ticks.formatters.numeric.apply(this, [value, index, ticks])
                                .replace(",","");
                        }
                    }
                }], 
                y: [{
                    title: { display: true, text: '$' },
                    ticks: {
                        display: true,
                        color: 'red',
                    },
                }],
            },
            plugins: {
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            let label = context.dataset.label || '';
                            if(label) {
                                let x = context.label.replace(",","");
                                let y = context.formattedValue;
                                return 'Year ' + x + ' "' + label + '": $' + y;
                            } else { return 'x'; }
                        },
                    },
                },
            },
        }
    };

    // MAKE CHART //////////////////////////////////////////////////////
    let mainChart = new Chart(document.getElementById(c.id), chartConfig);
rqqzpn5f

rqqzpn5f1#

docs中所述,刻度不是数组。所有刻度都是刻度对象中的对象。
因此,您需要将代码更改为:

options: {
  scales: {
    x: {
      // x options
    },
    y: {
      // y options
    },
  }
}

相关问题