Как игнорировать точки с одинаковым значением в Chart.js

Question

Как игнорировать точки с одинаковым значением в Chart.js

1

У меня есть диаграмма с использованием Chart.js, которая отлично работает, за исключением того, что я хочу, чтобы диаграмма рисовала прямую линию, когда значения y одинаковы. Например, в приведенном ниже изображении у меня есть некоторые данные, где есть сотни последовательных значений y, равных 1. То, что я хочу, вместо диаграммы, отображающей точку для каждого последовательного значения y 1, я хочу прямую линию. Я прочитал документацию по всем параметрам, и я не видел того, что соответствует моим потребностям. У кого-нибудь есть какие-либо идеи?

Код:

this.$EventsCountChart = new Chart(this.$EventsCountChart, {
                        type: 'line',
                        data: {
                            labels: timestamps,
                            datasets: [{
                                data: eventCounts,
                                backgroundColor: [
                                    'rgba(255, 99, 132, 0.2)',
                                    'rgba(54, 162, 235, 0.2)',
                                    'rgba(255, 206, 86, 0.2)',
                                    'rgba(75, 192, 192, 0.2)',
                                    'rgba(153, 102, 255, 0.2)',
                                    'rgba(255, 159, 64, 0.2)'
                                ],
                                borderColor: [
                                    'rgba(255,99,132,1)',
                                    'rgba(54, 162, 235, 1)',
                                    'rgba(255, 206, 86, 1)',
                                    'rgba(75, 192, 192, 1)',
                                    'rgba(153, 102, 255, 1)',
                                    'rgba(255, 159, 64, 1)'
                                ],
                                borderWidth: 1
                            }]
                        },
                        options: {
                            legend: {
                                display: false
                            },
                            scales: {
                                xAxes: [{
                                    scaleLabel: {
                                        display: false
                                    }
                                }],
                                yAxes: [{
                                    scaleLabel: {
                                        display: true,
                                        labelString: 'Event Count'
                                    },
                                    ticks: {
                                        beginAtZero: true
                                    }
                                }]
                            }
                        }
                    });

Заранее благодарю за любую помощь

Maxqueue 26 окт. 2017, в 18:30

Источник

0

Если вы посмотрите на изображение, сотни значений по 1 подряд. То, что я хочу, это только показывать точки при изменении значения у
Maxqueue 26 окт. 2017, в 16:02

Теги:

javascript

chart.js

2 ответа

0

Улучшение ответа ɢʀᴜɴᴛ

Чтобы увеличить производительность на 2x:

function factorData(data) {
   return data.map((e, i, a) => {
      let prev = a[i - 1];
      let next = a[i + 1];
      if (e === prev && e === next) return null;
      return e;
   });
}

(не повторяя над массивом второй раз)

Также не забывайте!

...
datasets: [{
  data: factorData(eventCounts),
  spanGaps: true
...

Dennis Dyallo 11 апр. 2018, в 13:14

Ещё вопросы

Если вы посмотрите на изображение, сотни значений по 1 подряд. То, что я хочу, это только показывать точки при изменении значения у

ɢʀᴜɴᴛ · Accepted Answer · 2017-10-26T14-55-00.000Z

Во-первых, используйте следующую функцию для определения ваших данных:

function factorData(data) {
   let _data = data.map((e, i, a) => {
      let prev = a[i - 1];
      let next = a[i + 1];
      if (e === prev && e === next) return '' + e;
      return e;
   }).map(e => typeof e === 'string' ? null : e);
   return _data;
}

затем установите для свойства spanGaps значение true для вашего набора данных, например:

...
datasets: [{
         data: factorData(eventCounts),
         spanGaps: true
         ...

см. рабочий пример.