ChartJS: как отобразить две шкалы «ось Y» на диаграмме

У меня есть диаграмма, которая показывает различные точки данных. Некоторые из этих точек данных являются большими числами, а некоторые — низкими.

Низкие числа (посещения) я могу масштабировать до другого масштаба, и этот новый масштаб можно поместить на ось «X» (это ось «Y», а затем повернуть на 90 градусов). Но проблема в следующем:

Сетка остается даже при удалении

Как я могу экстраполировать положение на графике, не настраивая данные метки при наведении курсора? 2 У меня есть документация по Stackoverflow и ChartJS, но я не вижу, как это можно сделать.

Я пытался использовать «другую» ось (в данном случае верхнюю горизонтальную полосу диаграммы), чтобы масштаб был относительным и редактирование необработанных данных не требовалось, но я не могу заставить это работать и не могу найти документацию по этому поводу. Я уверен, что это возможно, но я не вижу, как и где.

Я нашел этот вопрос, но это относится только к ChartJS V2.

Текущая используемая версия — ChartJS 3.2.1.

Оригинальная версия:

    var ctx = document.getElementById("historicChart");
    var historicChart = new Chart(ctx, {
            type: "horizontalBar",
            data: {
                labels: [2022,2021,2020,2019,2018,2017,2016],
                datasets: [
                    {
                        type: 'line',
                        label: 'Visits',
                        data: ["1","7","493","163","467","88","48"],
                        backgroundColor: '#FFC900',
                        pointBackgroundColor: '#FFC900',
                        pointRadius: 8,
                        pointStyle: 'circle',
                        showLine: false,
                        order: 1,
                        hoverRadius: 10
                    },
                    {
                        type: 'bar',
                        label: 'Applied',
                        data: ["486","800","704","1084","532","618","543"],
                        backgroundColor: '#436BFF',
                        borderWidth: 0,
                        order: 2,
                        barPercentage: 0.9,
                        stack: 'stack 0',
                    },
                    {
                        type: 'bar',
                        label: 'Accepted',
                        data: ["1","147","290","521","233","306","271"],
                        backgroundColor: '#C40500',
                        borderWidth: 0,
                        barPercentage: 0.9,
                        stack: 'stack 1',
                        order: 4
                    },
                    {
                        type: 'bar',
                        label: 'Declined',
                        data: ["616","4273","3998","3400","922","1225","1184"],
                        /*backgroundColor: '#03570c', /* emerald */
                        backgroundColor: '#006545', /* jade */
                        borderWidth: 0,
                        barPercentage: 0.9,
                        stack: 'stack 0',
                        order: 5
                    },
                    {
                        type: 'bar',
                        label: 'Processing',
                        data: ["6","13","22","1","34","2","1"],
                        backgroundColor: '#65ccD3', /* aqua + blue */
                        borderWidth: 0,
                        barPercentage: 0.9,
                        stack: 'stack 0',
                        order: 3
                    },
                ]
            },
            options: {
                responsive: true,
                interaction: {
                    intersect: false,
                    mode: 'index',
                    axis: 'y'
                },
                indexAxis: 'y',
                scales: {
                    xAxes: [{
                        stacked: true,
                        ticks: {
                            stepSize: 1
                        },
                        beginAtZero: true
                    }],
                    yAxes: [{
                        stacked: true
                    }]
                }
            }
        }
    );

<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.1/chart.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

   <canvas id = "historicChart"></canvas>

ОБНОВИТЬ:

Я попытался добавить пользовательскую вторичную ось в соответствии с этот пример из документации CHartJS, но это не совсем так, как мне нужно; линии сетки остаются, а шкала оси находится на «неправильной» стороне (две шкалы на одном размере (внизу) и нулевые шкалы на другой стороне (вверху)

var ctx = document.getElementById("historicChart");
    var historicChart = new Chart(ctx, {
            type: "horizontalBar",
            data: {
                labels: [2022,2021,2020,2019,2018,2017,2016],
                datasets: [
                    {
                        type: 'line',
                        label: 'Visits',
                        data: ["1","7","493","163","467","88","48"],
                        backgroundColor: '#FFC900',
                        pointBackgroundColor: '#FFC900',
                        pointRadius: 8,
                        pointStyle: 'circle',
                        showLine: false,
                        order: 1,
                        hoverRadius: 10,
                        xAxisID:'xTwo'
                    },
                    {
                        type: 'bar',
                        label: 'Applied',
                        data: ["486","900","724","1084","532","618","543"],
                        backgroundColor: '#436BFF',
                        borderWidth: 0,
                        order: 2,
                        barPercentage: 0.9,
                        stack: 'stack 0',
                    },
                    {
                        type: 'bar',
                        label: 'Accepted',
                        data: ["1","147","290","511","253","306","271"],
                        backgroundColor: '#C40500',
                        borderWidth: 0,
                        barPercentage: 0.9,
                        stack: 'stack 1',
                        order: 4
                    },
                    {
                        type: 'bar',
                        label: 'Declined',
                        data: ["616","4373","3998","3400","922","1205","1184"],
                        /*backgroundColor: '#03570c', /* emerald */
                        backgroundColor: '#006545', /* jade */
                        borderWidth: 0,
                        barPercentage: 0.9,
                        stack: 'stack 0',
                        order: 5
                    },
                    {
                        type: 'bar',
                        label: 'Processing',
                        data: ["6","23","22","1","4","2","1"],
                        backgroundColor: '#65ccD3', /* aqua + blue */
                        borderWidth: 0,
                        barPercentage: 0.9,
                        stack: 'stack 0',
                        order: 3
                    },
                ]
            },
            options: {
                responsive: true,
                interaction: {
                    intersect: false,
                    mode: 'index',
                    axis: 'y'
                },
                indexAxis: 'y',
                scales: {
                    xAxes: [{
                        stacked: true,
                        ticks: {
                            stepSize: 1
                        },
                        beginAtZero: true
                    }],
                    yAxes: [{
                        stacked: true
                    }],
                    xTwo: [{
                        type: 'linear',
                        display: true,
                        position: 'top',
                        grid: {
                            display: false,
                            drawOnChartArea: false,
                            ticks: {
                                display: false
                            }
                        }
                    }]
                }
            }
        }
    );

    <script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.1/chart.min.js"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

       <canvas id = "historicChart"></canvas>

Проблема, похоже, связана с масштабом; «хдва»;

     xTwo: [{
           type: 'linear',
           display: true,
           position: 'top',
           grid: {
                 display: false,
                 drawOnChartArea: false,
                 ticks: {
                 /* trying to even just hide the ticks here fails */
                         display: false,
                 }
           }
     }]

Как я могу исправить это, чтобы скрыть линии сетки и поместить шкалу на правильную сторону графика?

chart.js

22.03.2022 17:08

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете использовать обратный вызов пользовательской метки для этого в конфигурации всплывающей подсказки, также ваша конфигурация масштаба была неправильной. Это было в стиле V2. Для всех изменений, пожалуйста, прочитайте руководство по миграции

var ctx = document.getElementById("historicChart");
var historicChart = new Chart(ctx, {
  type: "horizontalBar",
  data: {
    labels: [2022, 2021, 2020, 2019, 2018, 2017, 2016],
    datasets: [{
        type: 'line',
        label: 'Visits',
        data: ["5", "35", "2465", "815", "2335", "440", "240"],
        backgroundColor: '#FFC900',
        pointBackgroundColor: '#FFC900',
        pointRadius: 8,
        pointStyle: 'circle',
        showLine: false,
        order: 1,
        hoverRadius: 10
      },
      {
        type: 'bar',
        label: 'Applied',
        data: ["486", "800", "704", "1084", "532", "618", "543"],
        backgroundColor: '#436BFF',
        borderWidth: 0,
        order: 2,
        barPercentage: 0.9,
        stack: 'stack 0',
      },
      {
        type: 'bar',
        label: 'Accepted',
        data: ["1", "147", "290", "521", "233", "306", "271"],
        backgroundColor: '#C40500',
        borderWidth: 0,
        barPercentage: 0.9,
        stack: 'stack 1',
        order: 4
      },
      {
        type: 'bar',
        label: 'Declined',
        data: ["616", "4273", "3998", "3400", "922", "1225", "1184"],
        /*backgroundColor: '#03570c', /* emerald */
        backgroundColor: '#006545',
        /* jade */
        borderWidth: 0,
        barPercentage: 0.9,
        stack: 'stack 0',
        order: 5
      },
      {
        type: 'bar',
        label: 'Processing',
        data: ["6", "13", "22", "1", "34", "2", "1"],
        backgroundColor: '#65ccD3',
        /* aqua + blue */
        borderWidth: 0,
        barPercentage: 0.9,
        stack: 'stack 0',
        order: 3
      },
    ]
  },
  options: {
    responsive: true,
    interaction: {
      intersect: false,
      mode: 'index',
      axis: 'y'
    },
    indexAxis: 'y',
    plugins: {
      tooltip: {
        callbacks: {
          label: (ttItem) => {
            const label = ttItem.dataset.label;
            const val = Number(ttItem.raw);

            let res = `${label}: ${label === 'Visits' ? val / 5 : val}`;
            return res
          }
        }
      }
    },
    scales: {
      x: {
        stacked: true,
        ticks: {
          stepSize: 1
        },
        beginAtZero: true
      },
      y: {
        stacked: true
      }
    }
  }
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.1/chart.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<canvas id = "historicChart"></canvas>

Обновлено:
Вы пытались добавить вторую шкалу, в chart.js V3 все шкалы являются их собственными объектами, а не массивами, все изменения см. в руководстве по миграции, указанном выше. Изменение масштабов на объекты устраняет вашу проблему в обновленном подходе без необходимости умножать значения:

var ctx = document.getElementById("historicChart");
var historicChart = new Chart(ctx, {
  type: "horizontalBar",
  data: {
    labels: [2022, 2021, 2020, 2019, 2018, 2017, 2016],
    datasets: [{
        type: 'line',
        label: 'Visits',
        data: ["1", "7", "493", "163", "467", "88", "48"],
        backgroundColor: '#FFC900',
        pointBackgroundColor: '#FFC900',
        pointRadius: 8,
        pointStyle: 'circle',
        showLine: false,
        order: 1,
        hoverRadius: 10,
        xAxisID: 'xTwo'
      },
      {
        type: 'bar',
        label: 'Applied',
        data: ["486", "900", "724", "1084", "532", "618", "543"],
        backgroundColor: '#436BFF',
        borderWidth: 0,
        order: 2,
        barPercentage: 0.9,
        stack: 'stack 0',
      },
      {
        type: 'bar',
        label: 'Accepted',
        data: ["1", "147", "290", "511", "253", "306", "271"],
        backgroundColor: '#C40500',
        borderWidth: 0,
        barPercentage: 0.9,
        stack: 'stack 1',
        order: 4
      },
      {
        type: 'bar',
        label: 'Declined',
        data: ["616", "4373", "3998", "3400", "922", "1205", "1184"],
        /*backgroundColor: '#03570c', /* emerald */
        backgroundColor: '#006545',
        /* jade */
        borderWidth: 0,
        barPercentage: 0.9,
        stack: 'stack 0',
        order: 5
      },
      {
        type: 'bar',
        label: 'Processing',
        data: ["6", "23", "22", "1", "4", "2", "1"],
        backgroundColor: '#65ccD3',
        /* aqua + blue */
        borderWidth: 0,
        barPercentage: 0.9,
        stack: 'stack 0',
        order: 3
      },
    ]
  },
  options: {
    responsive: true,
    interaction: {
      intersect: false,
      mode: 'index',
      axis: 'y'
    },
    indexAxis: 'y',
    scales: {
      x: {
        stacked: true,
        ticks: {
          stepSize: 1000
        },
        beginAtZero: true
      },
      y: {
        stacked: true
      },
      xTwo: {
        type: 'linear',
        display: true,
        position: 'top',
        grid: {
          display: false,
          ticks: {
            display: false
          }
        }
      }
    }
  }
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.1/chart.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<canvas id = "historicChart"></canvas>

Да, но конфигурация шкалы теперь еще более неверна, каждая шкала является своим собственным объектом, а не массивом, изменение которого сделает его таким, чтобы конфигурация применялась, как я сделал в своем ответе.

— 22.03.2022 17:38

О, это фантастика, исправление проблемы с масштабом устраняет мои проблемы и устраняет необходимость умножать значения данных.

— 22.03.2022 17:41

Если бы вы могли уточнить и выделить это в своем ответе, я могу поставить вам галочку, спасибо!

— 22.03.2022 17:42

Измените stepSize от 1 до 1000 в тиках по оси x, см. обновленный образец с 2 осями x

— 22.03.2022 17:54

О, пукает, я чертовски клоун; Я увидел, что размер шага по оси x равен 1, и подумал, что это «дата», но, конечно, если я установлю шаг по оси x на то, что мне нужно (250), это работает отлично. Спасибо. Потому что график повернут, я думаю. В любом случае, все отлично. еще раз спасибо :-)

— 22.03.2022 17:56

22.03.2022 17:35