Блог

Уже много дней я нахожусь в проекте, и до сих пор я забил много мини-целей в повседневной жизни. До сих пор я реализовал диаграмму с помощью ChartJS. На этой диаграмме много наборов данных (более 100), поэтому я вынужден создать пользовательскую легенду для меток. Результат легенды, который у меня есть сейчас, таков:

Желаемый результат, который я хочу, это:

Другими словами, когда я нажимаю на объект, я хочу запустить процесс, поскольку это была официальная легенда, а не обычай, который я создал.

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

Вот мой код для пользовательской легенды:

 legendCallback: function (chart3) {
                                        var legendHTML = [];
                                        legendHTML.push('<ul>');
                                        for (var i = 0; i < chart3.data.datasets.length; i  ) {

                                            if (chart3.isDatasetVisible[i]) {
                                                legendHTML.push('<li>');
                                            }
                                            else {
                                                legendHTML.push('<li class="">');
                                            }

                                            legendHTML.push('<span class="chart-color" style="background-color:'   chart3.data.datasets[i].backgroundColor   '"></span>');
                                            legendHTML.push('<li onclick="updateDataset(event, '   '''   chart3.legend.legendItems[i].datasetIndex   '''   ')">'   chart3.data.datasets[i].label   '</span>');
                                            legendHTML.push('</li>');

                                        }
                                        legendHTML.push('</ul>');
                                        return legendHTML.join("");

                                    }
 

функция для onClick:

 updateDataset = function (e, datasetIndex) {
                                var index = datasetIndex;
                                var ci = e.view.chart3;
                                var meta = ci.getDatasetMeta(index);

                                meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;
                                ci.update();
                            };

                            $('li span.chart-color').click(function() {
                                updateDataset($(this).data('index'));
                                $(this).toggleClass('li.hidden');
                            });
 

код CSS для легенды:

 ul {
  list-style: none;
}

li {
  display: inline-block;
  padding: 0 10px;
  cursor: pointer;
}

li.hidden {
  text-decoration: line-through !important;
}

li span.chart-color {
  border-radius: 5px;
  display: inline-block;
  height: 10px;
  margin-right: 5px;
  width: 10px;

}

#chart3-legend {
  float: left;
  overflow: auto;
}
 

Вы пытаетесь переключить класс, который вы не определили в своей таблице стилей. Классы в CSS начинаются с точки.

Вы также можете проверить, устанавливается ли класс для элемента, на который вы собираетесь его установить. Вы также можете столкнуться с проблемами при попытке использовать точки в имени вашего класса, потому что точка означает, что элемент имеет оба имени класса.

Это .x.y {styling} означает, что стиль будет применяться только к элементам, которые имеют хотя бы этот класс: class="x y"