Question

我正在开发一个网络应用程序，其中一部分包括一项功能，当我们点击谷歌图表的一部分时，会在浏览器中显示一个模式，目前我在谷歌图表中制作了一个按钮作为工具提示，点击后会显示一个模态。我想删除中间按钮并在单击条/切片时直接转到模态。我怎样才能做到这一点。 ? 当前代码 --

private drawChart()
{
  
 var arrSystem=this.system_value();
 var arrTruth=this.truth_value();
 var mapList=this.mapTable(arrSystem,arrTruth);
 var pieList=this.pieTable(mapList);
 var validMapList=this.ValidList(mapList);
 var invalidMapList=this.InvalidList(mapList);
var primaryList=[["valid",pieList[0]],["invalid",pieList[1]]];
var options={
    title:"Underlying results are",
    legend:"none"
  }
  let chart_invalid=new this.gLib.visualization.Table(document.getElementById('divInValidCalcChart'));
   let figures_invalid =new this.gLib.visualization.arrayToDataTable(invalidMapList);
             
    var options_invalid = {
        width:600,
        height:300,
        legend:true,
        theme:'material'
    };
    chart_invalid.draw(figures_invalid, options_invalid); 
    let chart_valid=new this.gLib.visualization.Table(document.getElementById('divValidCalcChart'));
    let figures_valid =new this.gLib.visualization.arrayToDataTable(validMapList);
              
     var options_valid = {
         width:600,
         height:300,
         legend:true,
         theme:'material'
     };
     chart_valid.draw(figures_valid, options_valid); 
var data_valid=new this.gLib.visualization.arrayToDataTable(validMapList);
var data_invalid=new this.gLib.visualization.arrayToDataTable(invalidMapList);
 // primaryList[0][2]='<button  class="btn btn-outline-info" data-toggle="modal" data-target="#exampleModalCenterValid" style="font-size:10px;color:#005eb8;border-color:#005eb8"><img src="https://img.icons8.com/small/16/000000/external-link.png"/>Valid Data</button>'
  //primaryList[1][2]='<button  class="btn btn-outline-info" data-toggle="modal" data-target="#exampleModalCenterInvalid" style="font-size:10px;color:#005eb8;border-color:#005eb8"><img src="https://img.icons8.com/small/16/000000/external-link.png"/>Invalid Data</button>'
  this.drawPrimaryChart(primaryList);
}
public mdlSampleIsOpen : boolean = false;
public openModal(open : boolean) : void {
    this.mdlSampleIsOpen = open;
}
 private drawPrimaryChart(primaryList:(string|number)[][])
 {
  let chart=new this.gLib.visualization.PieChart(document.getElementById('visible_div'));
  let data=new this.gLib.visualization.DataTable();
  data.addColumn('string','Status');
  data.addColumn('number','Count');
  /*data.addColumn({
    type:'string',
    label:'Tooltip Chart',
    role:'tooltip',
    'p':{'html':true}
  });*/
  data.addRows(primaryList);
 var options = {
     title: 'Invalid IATA Values',
     theme:'material',
     pieHole:0.4,
     width:500,
     height:300,
     tooltip:{isHtml:true,trigger:'selection'}
 };
 
 chart.draw(data, options);
 
 this.gLib.visualization.events.addListener(chart,'select',selectHandler);
 function selectHandler(this: any) {
  var selectedItem = chart.getSelection()[0];
  if (selectedItem) {
    var task = data.getValue(selectedItem.row, 0);
    if(task=='valid')
    {
     ///how to show the valid data modal here
    }
    else if (task=='invalid')
    {
      
   //how to show the invalid modal here 
    }
  }
}

我添加了一个选择处理函数，它应该调用一个模式而不是一个按钮，如果你能推荐可以做什么？

单击谷歌图表（饼图）切片时显示模态

0 个答案: