Question

我是js和设计的新手一般，我尽力解释我尽可能最好的问题，我有一个列和条形图，当我点击栏，它应该给我相应的另外3个不同的图表，实现这不是一个大问题，但用户界面正在变得痛苦，我想知道这样的问题的逻辑建议，它应该是模态或只是不同的div on s页面，显示图表？也许下面的例子可以让我的观点变得更好：

这是我的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：

Demo

Answer 1

您可以尝试修改现有的条形图。现有的栏可以修改。使用现有资源滑动到下一个资源总是好的，并且看起来比从不知名的地方随机突然出现更好。

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

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

1 个答案: