Stacked Floating Horizontal Bar с использованием ChartJS - PullRequest
Новая
       29

Stacked Floating Horizontal Bar с использованием ChartJS

0 голосов
/ 01 апреля 2020

Я пытаюсь реализовать Сложенные горизонтальные плавающие бары , используя График JS, но я сталкиваюсь с необычным поведением. Может кто-нибудь, пожалуйста, помогите, почему это происходит. Код, который я использую: 

<html>
<head>
    <title>Floating Bars</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
    <style>
        canvas {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }
    </style>
</head>

<body>
    <div>
        <canvas id="canvas" height="100"></canvas>
    </div>
    <script>         
      window.onload = function() {
         var ctx = document.getElementById('canvas').getContext('2d');
         window.myBar = new Chart(ctx, {
            type: 'horizontalBar',
            data:{
               labels:[1],
               datasets:[
               {
                 label:'data',
                 data:[[-3, 5]],
                 backgroundColor: 'lightblue'
               },
               {
                 label:'data',
                 data:[[6,8]],
                 backgroundColor: 'lightblue'
               },
               {
                 label:'data',
                 data:[[10, 11]],
                 backgroundColor: 'lightblue'
               }
               ]
            },
            options: {
               responsive: true,
               scales: {
                xAxes: [{
                  stacked : true,

                 }],
                 yAxes: [{
                  stacked : true,

                 }]
               },
               legend: {
                 position: 'top',
               },
               title: {
                 display: true,
                 text: 'Horizontal Floating Bars'
               }
            }
         });
      };
    </script>
</body>
</html>

Вывод следующего кода: enter image description here

Теперь, если мы сравним код с построенными данными мы видим, что первый и второй набор данных, т.е. [-3,5] и [6,8], отображаются правильно, но третий набор данных вместо того, чтобы отображаться в [10,11], наносится в [16,17] т.е. добавив 10 к предыдущему 6. Может ли кто-нибудь объяснить причину этого?

1 Ответ

1 голос
/ 01 апреля 2020

Причина в том, что вы складываете значения в xAxis.

Просто определите xAxis следующим образом, и вы получите ожидаемый результат. 

xAxes: [{
  stacked: false,
}]


window.myBar = new Chart(document.getElementById('canvas'), {
  type: 'horizontalBar',
  data: {
    labels: [1],
    datasets: [{
        label: 'data 1',
        data: [[-3, 5], [6, 8], [10, 11]],
        backgroundColor: 'lightblue'
      },
      {
        label: 'data 2',
        data: [[6, 8]],
        backgroundColor: 'lightblue'
      },
      {
        label: 'data 3',
        data: [[10, 11]],
        backgroundColor: 'lightblue'
      }
    ]
  },
  options: {
    responsive: true,
    scales: {
      xAxes: [{
        stacked: false,
      }],
      yAxes: [{
        stacked: true,
      }]
    },
    legend: {
      position: 'top',
    },
    title: {
      display: true,
      text: 'Horizontal Floating Bars'
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="canvas" height="80"></canvas>
...