Гистограмма с накоплением, два на одной линии с одинаковым цветом - PullRequest
Новая
       113

Гистограмма с накоплением, два на одной линии с одинаковым цветом

0 голосов
/ 14 июля 2020

Добрый день!

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

Я получаю правильный вид, но когда вы наводите курсор, он показывает группу [NaN, NaN].

Пример того, как я это получаю: https://jsfiddle.net/3s5mchp1/1/

<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, 2],
               datasets:[
               {
                 label:'data',
                 data:[[-3, 5]],
                 backgroundColor: 'lightblue'
               },
               {
                 label:'data',
                 data:[[], [6,8]],
                 backgroundColor: 'orange'
               },
               {
                 label:'data',
                 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>
</body>
</html>

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

1 Ответ

1 голос
/ 14 июля 2020

Быстрый способ исправить это - добавить в диаграмму обратный вызов всплывающей подсказки:

jsfiddle 

tooltips: {
     callbacks: {
      label: function(tooltipItems, data) {
        if (isNaN(tooltipItems.x)) return null
        return tooltipItems.xLabel
      }
   }
}
...