Как сделать так, чтобы гистограммы и точки рассеивания отображались друг под другом?

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

введите здесь описание изображения

введите здесь описание изображения

Вы можете проверить демонстрацию здесь demo

любая помощь, пожалуйста?


reactjs react-chartjs chart.js
person webcoder    schedule 12.05.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете делать это в индивидуальном порядке. Проблема в том, что обе диаграммы имеют разный тип xAxis (linear и категория ). Также yAxis ярлыки имеют разную длину.

Чтобы решить проблему на диаграмме из вашей демонстрации, вы можете изменить параметры на диаграмме разброса следующим образом.

  1. Определите параметр scales.xAxes.offset: true, чтобы он соответствовал значению по умолчанию, определенному для бара графики.
  2. Добавьте min и max к scales.xAxes.ticks, чтобы по горизонтали скорректировать точки с помощью полос.
scales: {
   xAxes: [{
       offset: true, 
       gridLines: {
         display: false
       },
       ticks: {
         min: -0.2, 
         max: 3.3,

Взгляните на свой измененная демоверсия.

person uminder    schedule 12.05.2020
comment
спасибо, это помогло много, но если данные увеличиваются, это не работает достаточно хорошо, например, если у меня const data = [ { effect: 1.0, likes: 84.64, name: "Price of fish" }, { effect: -1, likes: -20.39, name: "Holiday" }, { effect: 1, likes: 14.58, name: "Weather " }, { effect: null, likes: 0, name: "Interest " }, { effect: null, likes: 0, name: "Shopping" }, { effect: 0, likes: 5, name: "Cart" } ];, это не сработает (изменил максимум, но не могу больше изменений на минимуме) - person webcoder; 12.05.2020