管理在单个页面中显示不同图表的最佳方法

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";
              }
            }
          }],     
        }); 

          }

这里是演示：

Demo

Answer 1

您可以尝试修改现有的条形图。可以修改现有的钢筋。使用现有资源滑动到下一个总是好的，并且似乎比随机弹出条条要好得多。

只需查看此链接 http://nivo.rocks/bar 。单击右侧的掷骰子按钮或将堆叠选项更改为下面的分组，您会对此有所了解。