Связывание графиков двух графиков пользовательского интерфейса Shield

Question

У меня есть вопрос, касающийся экрана библиотеки карт ui. По сути, у меня есть две диаграммы на одной странице. Я хотел бы соединить их в том смысле, что когда пользователь выбирает панель из одной из диаграмм, другой элемент управления будет заполнен данными, относящимися к выбору.

Answer 1

Ниже приведен пример, показывающий два графика. Слева расположены 4 квартальных набора данных, используя макет диапазона. Щелчок по каждому из них показывает подробную информацию о данных на правом графике.

<script type=""text/javascript""> 
    $(function() { 
     $(""#container1"").shieldChart({ 
      theme: ThemeChooser.theme, 
      events: { 
       pointSelect: function pointSelectHandler(args) { 

        var localData; 
        var headerText = ""Data For : "" + args.point.name; 

        if (args.point.x == 0) { 
         localData = [12, 3, 4, 2, 12, 3, 4, 17, 22, 34, 54, 67]; 
        } 
        else if (args.point.x == 1) { 
         localData = [3, 9, 12, 14, 22, 32, 45, 12, 67, 45, 55, 7]; 
        } 
        else if (args.point.x == 2) { 
         localData = [23, 19, 11, 134, 242, 352, 435, 22, 637, 445, 555, 57]; 
        } 
        else { 
         localData = [13, 19, 112, 114, 212, 332, 435, 132, 67, 45, 55, 7]; 
        } 

        var containter = $(""#container2"").swidget(); 
        containter.destroy(); 
        $(""#container2"").shieldChart(
         { 
          exportOptions: 
          { 
           image: false, 
           print: false 
          }, 

          primaryHeader: { 
           text: headerText 
          }, 
          dataSeries: [ 
           { 
            seriesType: 'line', 
            collectionAlias: 'Q Data', 
            data: localData 
           } 
          ] 
         } 
         ); 
       } 
      }, 

      exportOptions: 
        { 
         image: false, 
         print: false 
        }, 

      seriesSettings: { 
       rangebar: 
        { 
         enablePointSelection: true 
        } 
      }, 

      tooltipSettings: { 
       customPointText: 'Low Value: <b>{point.low}</b></br>High Value:<b>  {point.high}</b>' 
      }, 

      axisY: { 
       title: { 
        text: ""Quarterly"" 
       } 
      }, 

      axisX: { 
       categoricalValues: [""Q1"", ""Q2"", ""Q3"", ""Q4""] 
      }, 

      primaryHeader: { 
       text: ""Quarterly performance"" 
      }, 

      dataSeries: [ 
       { 
        seriesType: 'rangebar', 
        collectionAlias: 'Low/High ', 
        data: [[3, 9], [12, 23], [1, 17], [-3, 12]] 
       } 
      ] 
     }); 

     $(""#container2"").shieldChart({ 
      theme: ThemeChooser.theme, 
      exportOptions: 
        { 
         image: false, 
         print: false 
        }, 

      primaryHeader: { 
       text: ""Values for specific quarter"" 
      }, 

      dataSeries: [ 
       { 
        seriesType: 'line', 
        collectionAlias: 'Q Data', 
        data: [12, 3, 4, 2, 12, 3, 4, 17, 22, 34, 54, 67] 
       } 
      ] 
     }); 
    }); 
</script>"