Charts.js - Диаграмма пузырьков с двумя осями слов

Question

Мне нужно создать диаграмму стиля пузырьковой диаграммы, которая имеет две оси, и те, которые являются словами, а не текстом.

В моем примере я хочу:

• оси х быть цвета, например, красный, синий, желтый
• ось y для автомобилей, например. маленький автомобиль, средний автомобиль, большой автомобиль

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

Я немного поработал с charts.js, но ни один из моих примеров не охватывает использование текста вместо цифр.

Любая помощь будет принята с благодарностью, я просмотрел документацию здесь .. enter link description here, но не смог получить что-нибудь на работу.

Заранее спасибо.

Answer 1

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

var colours = ["Red", "Blue", "Green", "Yellow"]; 
var carSizes = ["Small", "Medium", "Large"]; 

// Small Red = 10 
// Small Green = 14 
// Medium Yellow = 23 
var dataPoints = [{x: 0, y: 0, r: 10}, {x: 2, y: 0, r: 14}, {x: 3, y: 1, r: 23} 

var myBubbleChart = new Chart(bubbleCtx, { 
      type: 'bubble', 
      data: dataPoints, 
      options: { 
       title: { 
        display: true, 
        text: "Car Orders" 
       }, 
       scales: { 
        yAxes: [{ 
         ticks: { 
          stepSize: 1, 
          callback: function (value, index, values) { 
           if (index < carSizes.length) { 
            return carSizes[carSizes.length - (1 + index)]; //this is to reverse the ordering 
           } 
          } 
         }, 
         position: 'left' 
        }], 
        xAxes: [{ 
         ticks: { 
          stepSize: 1, 
          callback: function (value, index, values) { 
           if (index < colours.length) { 
            return colours[index]; 
           } 
          } 
         }, 
         position: 'bottom' 
        }] 
       } 
      } 
     }); 

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

Если вы не устанавливаете данные динамически и не знаете минимальное и максимальное значения для каждой оси, вы можете установить минимальные и максимальные атрибуты для тиков и указать тип оси как «категория».

yAxes: [{ 
    type: 'category', 
    ticks: { 
     stepSize: 1, 
     min: 'Small', 
     max: 'Large' 
    }, 
    position: 'left' 
}]