Блог

Главная - Вопросы по программированию - Метка набора данных js диаграммы не отображается

Метка набора данных js диаграммы не отображается

#angular #ionic-framework #chart.js

Вопрос:

Я пытаюсь сейчас chart.js version 3.6 , но у меня проблема, что метка набора данных не отображается.

Я попробовал это, но безрезультатно

     const labels: string[] = [];
    const sold: number[] = [];
    const released: number[] = [];

    for (const d of r.data) {
        labels.push(d.date);
        sold.push(d.sold);
        released.push(d.released);
    }

    const quarterChart = new Chart('quarterGraphCanvas', {
        type: 'line',
        data: {
            labels,
            datasets: [
                {
                    label: 'Sold Amount',
                    data: sold,
                    fill: false,
                    borderColor: 'red',
                },
                {
                    label: 'Released Amount',
                    data: released,
                    fill: false,
                    borderColor: 'blue',
                },
            ],
        },
        options: {
            plugins: {
                tooltip: {
                    mode: 'index',
                    intersect: false,
                },
            },
            scales: {
                y: {
                    beginAtZero: true,
                },
            },
        },
    });

    quarterChart.render();

Этикетка Sold Amount и Released Amount не отображается.
Какие варианты я пропустил?

Комментарии:

1. Что вы имеете в виду, когда они не отображаются, где они не отображаются, потому что они используются в нескольких местах

2. Диаграмма отображается без проблем, когда я пытаюсь использовать вашу конфигурацию, chartjs.org/docs/latest/charts/line.html . Пожалуйста, помогите добавить данные для воспроизведения.

3. @LeeLenalee Я имею в виду, что метки набора данных не отображаются. В версии 2 эти метки отображаются вверху.

4. @huy данные-это просто простой объект, с a date string и номерами для другого свойства sold и released

5. Кажется, все работает нормально, так что единственное, о чем я могу думать, это то, что вы где-то устанавливаете значение легенды по умолчанию в значение false: jsfiddle.net/Leelenaleee/ve02q7ja

Ответ №1:

Проблема заключалась в chart.js интеграция, я выбираю только несколько контроллеров, которые, как я думал, мне только нужны, и придумываю это.

   Chart.register(
    LinearScale,
    CategoryScale,
    LineElement,
    LineController,
    PointElement
  );

И был исправлен с помощью

 Chart.register(...regiserables);

Но я договорился с

 import Chart from 'chart.js/auto';

И полностью удалите Chart.register .

Метки: