лучший способ показать разные графики на одной странице

Question

Я новичок в js и дизайне в целом, я стараюсь изо всех сил объяснить свою проблему как можно лучше, у меня есть столбцы и гистограммы, когда я нажимаю на столбцы, это должно дать мне еще 3соответственно, разные графики, реализация этого не представляет особой проблемы, но пользовательский интерфейс становится проблемой, я хочу знать, что является логическим предложением для такой проблемы, это должен быть модальный или просто другой div на странице, чтобы показатьграфики?может быть, приведенный ниже пример может улучшить мою точку зрения:

Вот мой HTML:

 <div style="width:100%">
    <div id="chart" style="width:30% ;float:left"></div>
    <div id="chart2" style="width:35%;float:right"></div>
    <div id="chart3" style="width:25%;float:left"></div>
    </div>

Вот JS:

$("#chart").kendoChart({
          series: [{
            data: [1, 2],
            color: function(point) {
              if (point.value > 1) {
                return "red";
              }

              // use the default series theme color
            }
          }],  
          seriesClick:seriesClick  
        });

          function seriesClick(){
          $("#chart2").kendoChart({
           command:{ text: "View Details" },
          series: [{
            data: [5, 6],  
            color: function(point) {
              if (point.value > 5) {
                return "blue";
              }
            }
          }],     
        });  
          $("#chart3").kendoChart({
           command:{ text: "View Details" },
          series: [{
            data: [1, 3],  
            color: function(point) {
              if (point.value > 1) {
                return "green";
              }
            }
          }],     
        }); 

          }

Вот ДЕМО:

Демо

Answer 1

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

Просто перейдите по этой ссылке http://nivo.rocks/bar.Нажмите на кнопку «бросить кости» справа или измените сгруппированный вариант на сгруппированный, который представлен ниже, и вы получите представление об этом.