Диаграмма JS Stacked Bar Chart прозрачные пробелы - PullRequest
Новая
       21

Диаграмма JS Stacked Bar Chart прозрачные пробелы

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

Я уже несколько дней ломаю голову над этим, начинаю думать, что это ошибка в пакете chartJS? Когда я настраиваю столбчатую диаграмму с накоплением, даже с довольно простой конфигурацией параметров, я имею тенденцию получать очень тонкие прозрачные промежутки между самими данными столбца. Чем больше данных у вас в панели, тем более очевидными они становятся. Я полностью изолировал его от своего кода (мы используем React и react-chartjs-2, но я = я воссоздал его, используя vanilla Chart JS, последняя версия).

В моем примере здесь Я превратил все данные столбца в черный цвет и поместил их на красный фон с белой рамкой. Если вы присмотритесь, вы увидите вертикальные линии красного цвета между столбиками (ie: мы видим сами столбики на красном фоне), и белая граница наведения никогда не сработает на левой стороне.

Есть какие-нибудь идеи относительно того, может ли это быть проблема с данными, или настройки параметров, с которыми я еще не сталкивался, или, возможно, ошибка в пакете? Диаграмма, с которой мы это визуализируем, использует тысячи точек данных, и она начинает выглядеть как ломаный градиент со всеми прозрачными субпиксельными линиями. Любая помощь будет принята с благодарностью, спасибо!

Вот небольшой демонстрационный код, который я привел в качестве примера в JSFiddle: 

var barOptions_stacked = {
  scales: {
    xAxes: [
      {
        ticks: {
          fontColor: "#FFF"
        },
        stacked: true,
      },
    ],
    yAxes: [
      {
        ticks: {
          fontColor: "#FFF"
        },
        stacked: true,
      },
    ],
  },
};

var myChart = new Chart(ctx, {
  type: 'horizontalBar',
  data: {
    labels: ['2014', '2013'],
    datasets: [
      {
        label: "one",
        data: [100,200],
        backgroundColor: 'black',
        hoverBorderColor: '#FFFFFF',
      },
      {
        label: "two",
        data: [300, 400],
        backgroundColor: 'black',
        hoverBorderColor: '#FFFFFF',
      }
    ],
  },
  options: barOptions_stacked,
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<div style="background-color: red">
  <canvas id="ctx"></canvas>
</div>

Вот пример JSFiddle: если вы действительно расширите представление графика вверх, вы увидите линии в игре.

Пример JSFiddle

Пример гистограммы Img

1 Ответ

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

Удалите это stacked: false, из xAxes, чтобы решить эту проблему. В любом случае черный на черном (или любой другой цвет) ==> Veryyyyyyy очень не дружелюбная визуализация данных.

О самой строке - это больше проблема GitHub (ее никак не решить). 

var barOptions_stacked = {
  scales: {
    xAxes: [
      {
        ticks: {
          fontColor: "#FFF"
        },
        stacked: false,
      },
    ],
    yAxes: [
      {
        ticks: {
          fontColor: "#FFF"
        },
        stacked: true,
      },
    ],
  },
};

var myChart = new Chart(ctx, {
  type: 'horizontalBar',
  data: {
    labels: ['2014', '2013'],
    datasets: [
      {
        label: "one",
        data: [100,200],
        backgroundColor: 'black',
        hoverBorderColor: '#FFFFFF',
      },
      {
        label: "two",
        data: [300, 1100],
        backgroundColor: 'black',
        hoverBorderColor: '#FFFFFF',
      }
    ],
  },
  options: barOptions_stacked,
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<div style="background-color: red">
  <canvas id="ctx"></canvas>
</div>

Для bar типа «черный на черном» вы должны установить yAxes на false.

...