Java脚本谷歌饼图：如果没有数据显示，则显示一个空的饼图 [英] Java script google pie chart: show an empty pie chart if there is no data to show

查看：152
本文介绍了Java脚本谷歌饼图：如果没有数据显示，则显示一个空的饼图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我目前在Google饼图中遇到了一些问题。我有一张饼图，它终于可以正常工作，并显示饼图中的数据。



我现在的问题是，当没有数据显示在饼图中时，什么都不会出现。如果没有要显示的数据，我想显示一个空的饼图。



另外，我也希望始终显示一个空的饼图，然后让饼图会动态加载饼图中的数据，所以我可以看到它发生。



希望你们能帮助我！我非常感激。



我目前有以下javascript：
（更新版本）

 < div style =border：0px solid rgb（201，0，1）; overflow：hidden; margin：15px auto; max-width：100％;> 
< script type =text / javascriptsrc =https://www.gstatic.com/charts/loader.js>< / script> 
< script type =text / javascript> 
 google.charts.load（'current'，{packages：['corechart']}）; 
 google.charts.setOnLoadCallback（drawChart）; 
< / script> 
< script type =text / javascript> 
 
 var highRiskCategory1 = 0; 
 var mediumHighRiskCategory1 = 0; 
 var mediumRiskCategory1 = 0; 
 var mediumLowRiskCategory1 = 0; 
 var lowRiskCategory1 = 0; 
 
 var xmlURL =; 
 var xml; 
 
 var firstDraw = true; 
 
 //首先加载谷歌
 google.charts.load（'current'，{
 callback：function（）{
 //绘制无数据图表
 drawPiechartblank（）; 
}，
 packages：['corechart'] 
}）; 
 
函数loadData（）{
 $ j.ajax（{
 url：xmlURL，
 dataType：'xml'，
 beforeSend：function（） {
 $ j（'＃loader'）。show（）; 
}，
 success：function（data）{
 xml = data; 
 $ j（ '#loader'）。hide（）; 
 createPiechartthree（）; 
}，
 error：function（jqXHR，text）{
 console.log（text）; 
 drawPiechartblank（）; 
 return; 
} 
}）; 
} 
 
函数createPiechartthree（）{
 var columns = {}; 
 var xmlColumns = $ j（'head'，xml）; 
 xmlColumns.find（'headColumn'）。each（function（）{
 var columnName = $ j（this）.find（'columnValue'）。text（）; 
 var columnID = $ j（this）.attr（'columnid'）; 
列[columnName] =（columnID）; 
}）; 
 
 var xmlData = $ j（'data'，xml）; 
 
 xmlData.find（'item'）。each（function（）{
 $ j（this）.find（'column'）。each（function（）{
 var colID = $ j（this）.attr（columnid）; 
 var value = $ j（this）.find（'displayData'）。text（）; 
 
 if colID == columns [Risk category]）{
 if（value ===5. High Risk）{
 highRiskCategory1 ++; 
} 
 else if（value = ==4. Medium High Risk）{
 mediumHighRiskCategory1 ++; 
} 
 else if（value ===3. Medium Risk）{
 mediumRiskCategory1 ++; 
 
 else if（value ===2. Medium Low Risk）{
 mediumLowRiskCategory1 ++; 
} 
 else if（value ===1. Low Risk ）{
 lowRiskCategory1 ++; 
} 
} 
}）; 
}）; $（b）b 
 //检查数据
 if（（highRiskCategory1 + mediumHighRiskCategory1 + mediumRiskCategory1 + mediumLowRiskCategory1 + lowRiskCategory1）=== 0）{
 drawPiechartblank（）; 
} else {
 drawPiechartthree（highRiskCategory1，mediumHighRiskCategory1，mediumRiskCategory1，mediumLowRiskCategory1，lowRiskCategory1）; 
 
 
 
函数drawPiechartthree（highRiskCategory1，mediumHighRiskCategory1，mediumRiskCategory1，mediumLowRiskCategory1，lowRiskCategory1）{
 var data = google.visualization.arrayToDataTable（[
 ['交易对手是PEP'，'金额']，
 ['非常低'，0]，
 ['高风险'，高风险类别1]，
 ['中等风险'，mediumHighRiskCategory1]，
 ['Medium Risk'，mediumRiskCategory1]，
 ['Medium Low Risk'，mediumLowRiskCategory1]，
 ['Low Risk'，lowRiskCategory1]，
 [ '非常高'，0] 
]）; 
 
 var options = {
 chartArea：{
 //允许选择空间突出显示
底部：12，
剩下：12，
 right：12，
 top：12，
 
 height：'100％'，
 width：'100％'
}，
 pieHole：0.5 ，
颜色：['＃25b578'，'＃f05023'，'＃FF944A'，'＃F6BD53'，'＃FFE158'，'＃6FC968'，'＃8C8886']，
切片： {
 2：{offset：0.02}，
 3：{offset：0.02}，
 4：{offset：0.02}，
 5：{offset：0.02}，
}，
}; 
 
 var chart = new google.visualization.PieChart（
 document.getElementById（'Piechartthree_div'））; 
 chart.draw（data，options）; 
 
 var selectHandler = function（e）{
 var selectedItem = chart.getSelection（）[0]; 
 if（selectedItem）{
 var topping = data.getValue（selectedItem.row，0）; 
 console.log（topping）; 
 if（topping ==='High Risk'）{
 window.location.href =''; 
} 
 else if（topping ==='Medium High Risk'）{
 window.location.href =''; 
} 
 else if（topping ==='Medium Risk'）{
 window.location.href =''; 
} 
 else if（topping ==='Medium Low Risk'）{
 window.location.href =''; 
} 
 else if（topping ==='Low Risk'）{
 window.location.href =''; 
} 
} 
} 
 google.visualization.events.addListener（图表，'select'，selectHandler）; 
 
 
函数drawPiechartblank（）{
 var data = google.visualization.arrayToDataTable（[
 ['对方是PEP吗？'，'金额'] ，
 //第一列空白删除图例，
 //使用对象表示法格式化值（f :) 
 [''，{v：1，f：'No Data'}] 
]）; 
 
 var options = {
 chartArea：{
 bottom：12，
 left：12，
 right：12，
 top：12 ，
 height：'100％'，
 width：'100％'
}，
 pieHole：0.5，
颜色：['transparent']，
 pieSliceBorderColor：'＃9e9e9e'，
 //显示数据的格式化值
 pieSliceText：'value'，
 //默认文字样式是白色
 // won' t显示在中心，除非改变颜色
 pieSliceTextStyle：{
 color：'＃9e9e9e'
}，
 tooltip：{
 trigger：'none'
 } 
}; 
 
 var chart = new google.visualization.PieChart（
 document.getElementById（'Piechartthree_div'）
）; 
 google.visualization.events.addListener（chart，'ready'，function（）{
 //在第一次绘制时加载数据
 if（firstDraw）{
 firstDraw = false; 
 loadData（）; 
} 
}）; 
 chart.draw（data，options）; 
} 
< / script> 
< div id =Piechartthree_divstyle =width：100％; height：; position：relative;>< img alt =id =src =./ attachment_dw.action？ attachmentId = 2233style =width：80px; height：80px; display：inline-block; position：absolute; right：50％; top：50％; />< / DIV> 
< / div>


解决方案

为了绘制饼图，至少有一行，值大于零



所以只需对所需数据进行硬编码... 

  var data = google.visualization.arrayToDataTable（[
 ['对方是PEP吗？'，'金额']， 
 [''，{v：1，f：'无数据'}] 
]）;

使用空白字符串''行标签将阻止显示图例

使用格式化值 f：在饼图中心显示文本

需要以下选项...

$ $ p $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $'$' ，

//默认文字样式是白色
//不会显示在中心，除非改变颜色
pieSliceTextStyle：{
color：'＃9e9e9e'
$，

使图表看起来像空，使用transparent作为颜色并添加边框... 

 颜色：['transparent']，
 pieSliceBorderColor：'＃9e9e9e '，

请参阅以下工作片段...



]}）;函数drawPiechartblank（）{var data = google.visualization.arrayToDataTable（[['对方是PEP吗？'，'金额']，/ /第一列删除图例，/ /使用对象符号格式化值（f :) [''，{v：1，f：'无数据'}]]）; var options = {chartArea：{bottom：12，left：12，right：12，top：12，height：'100％'，width：'100％'}，pieHole：0.5，colors：['transparent']， pieSliceBorderColor：'＃9e9e9e'，//显示数据的格式化值pieSliceText：'value'，//默认文字样式是白色的//不会显示在中心，除非改变颜色pieSliceTextStyle：{color：'＃9e9e9e'}， tooltip：{trigger：'none'}}; var chart = new google.visualization.PieChart（document.getElementById（'Piechartthree_div'））; chart.draw（data，options）;}

< script src =https://www.gstatic.com/charts/loader.js>< / script>< div id =Piechartthree_div>< / div>





以图表，首先加载谷歌，绘制空白图表

  //加载谷歌首页
 google.charts.load （'current'，{
 callback：function（）{
 //绘制无数据图表
 drawPiechartblank（）; 
}，
 packages：[' corechart'] 
}）;

然后等待'ready'事件在发送第一个数据请求之前... 

  google.visualization.events.addListener（图表，'ready'，function（ ）{
 if（firstDraw）{
 firstDraw = false; 
 loadData（）; 
} 
}）;





请参阅以下代码片段， 。 

 < div style =border：0px solid rgb（201，0，1）; overflow：hidden; margin： 15px auto; max-width：100％;> 
< script src =https://www.gstatic.com/charts/loader.js>< / script> 
< script> 
 
 var highRiskCategory1 = 0; 
 var mediumHighRiskCategory1 = 0; 
 var mediumRiskCategory1 = 0; 
 var mediumLowRiskCategory1 = 0; 
 var lowRiskCategory1 = 0; 
 
 var xmlURL =XMLLINK; 
 var xml; 
 
 var firstDraw = true; 
 
 //首先加载谷歌
 google.charts.load（'current'，{
 callback：function（）{
 //绘制无数据图表
 drawPiechartblank（）; 
}，
 packages：['corechart'] 
}）; 
 
函数loadData（）{
 $ j.ajax（{
 url：xmlURL，
 dataType：'xml'，
 beforeSend：function（） {
 $ j（'＃loader'）。show（）; 
}，
 success：function（data）{
 xml = data; 
 $ j（ '#loader'）。hide（）; 
 createPiechartthree（）; 
}，
 error：function（jqXHR，text）{
 drawPiechartblank（）; 
 return ; 
} 
}）; 
} 
 
函数createPiechartthree（）{
 var columns = {}; 
 var xmlColumns = $ j（'head'，xml）; 
 xmlColumns.find（'headColumn'）。each（function（）{
 var columnName = $ j（this）.find（'columnValue'）。text（）; 
 var columnID = $ j（this）.attr（'columnid'）; 
列[columnName] =（columnID）; 
}）; 
 
 var xmlData = $ j（'data'，xml）; 
 
 xmlData.find（'item'）。each（function（）{
 $ j（this）.find（'column'）。each（function（）{
 var colID = $ j（this）.attr（columnid）; 
 var value = $ j（this）.find（'displayData'）。text（）; 
 
 if colID == columns [Risk category]）{
 if（value ===5. High Risk）{
 highRiskCategory1 ++; 
} 
 else if（value = ==4. Medium High Risk）{
 mediumHighRiskCategory1 ++; 
} 
 else if（value ===3. Medium Risk）{
 mediumRiskCategory1 ++; 
 
 else if（value ===2. Medium Low Risk）{
 mediumLowRiskCategory1 ++; 
} 
 else if（value ===1. Low Risk ）{
 lowRiskCategory1 ++; 
} 
} 
}）; 
}）; $（b）b 
 //检查数据
 if（（highRiskCategory1 + mediumHighRiskCategory1 + mediumRiskCategory1 + mediumLowRiskCategory1 + lowRiskCategory1）=== 0）{
 drawPiechartblank（）; 
} else {
 drawPiechartthree（highRiskCategory1，mediumHighRiskCategory1，mediumRiskCategory1，mediumLowRiskCategory1，lowRiskCategory1）; 
 
 
 
函数drawPiechartthree（highRiskCategory1，mediumHighRiskCategory1，mediumRiskCategory1，mediumLowRiskCategory1，lowRiskCategory1）{
 var data = google.visualization.arrayToDataTable（[
 ['交易对手是PEP'，'金额']，
 ['非常低'，0]，
 ['高风险'，高风险类别1]，
 ['中等风险'，mediumHighRiskCategory1]，
 ['Medium Risk'，mediumRiskCategory1]，
 ['Medium Low Risk'，mediumLowRiskCategory1]，
 ['Low Risk'，lowRiskCategory1]，
 [ '非常高'，0] 
]）; 
 
 var options = {
 chartArea：{
 //允许选择空间突出显示
底部：12，
剩下：12，
 right：12，
 top：12，
 
 height：'100％'，
 width：'100％'
}，
 pieHole：0.5 ，
颜色：['＃25b578'，'＃f05023'，'＃FF944A'，'＃F6BD53'，'＃FFE158'，'＃6FC968'，'＃8C8886']，
切片： {
 2：{offset：0.02}，
 3：{offset：0.02}，
 4：{offset：0.02}，
 5：{offset：0.02}，
}，
}; 
 
 var chart = new google.visualization.PieChart（
 document.getElementById（'Piechartthree_div'））; 
 chart.draw（data，options）; 
 
 var selectHandler = function（e）{
 var selectedItem = chart.getSelection（）[0]; 
 if（selectedItem）{
 var topping = data.getValue（selectedItem.row，0）; 
 console.log（topping）; 
 if（topping ==='High Risk'）{
 window.location.href =''; 
} 
 else if（topping ==='Medium High Risk'）{
 window.location.href =''; 
} 
 else if（topping ==='Medium Risk'）{
 window.location.href =''; 
} 
 else if（topping ==='Medium Low Risk'）{
 window.location.href =''; 
} 
 else if（topping ==='Low Risk'）{
 window.location.href =''; 
} 
} 
} 
 google.visualization.events.addListener（图表，'select'，selectHandler）; 
 
 
函数drawPiechartblank（）{
 var data = google.visualization.arrayToDataTable（[
 ['对方是PEP吗？'，'金额'] ，
 //第一列空白删除图例，
 //使用对象表示法格式化值（f :) 
 [''，{v：1，f：'No Data'}] 
]）; 
 
 var options = {
 chartArea：{
 bottom：12，
 left：12，
 right：12，
 top：12 ，
 height：'100％'，
 width：'100％'
}，
 pieHole：0.5，
颜色：['transparent']，
 pieSliceBorderColor：'＃9e9e9e'，
 //显示数据的格式化值
 pieSliceText：'value'，
 //默认文字样式是白色
 // won' t显示在中心，除非改变颜色
 pieSliceTextStyle：{
 color：'＃9e9e9e'
}，
 tooltip：{
 trigger：'none'
 } 
}; 
 
 var chart = new google.visualization.PieChart（
 document.getElementById（'Piechartthree_div'）
）; 
 google.visualization.events.addListener（chart，'ready'，function（）{
 //在第一次绘制时加载数据
 if（firstDraw）{
 firstDraw = false; 
 loadData（）; 
} 
}）; 
 chart.draw（data，options）; 
} 
< / script> 
< div id =Piechartthree_divstyle =width：100％; height：; position：relative;>< img alt =id =src =./ attachment_dw.action？ attachmentId = 2233style =width：80px; height：80px; display：inline-block; position：absolute; right：50％; top：50％; />< / DIV> 
< / div>





笔记：推荐使用较新的库 loader.js 与较旧的 jsapi



根据发行说明 ...


通过jsapi加载器保持可用的谷歌图表版本不再持续更新。请从现在开始使用新的gstatic loader。 




 < script src =https://www.gstatic.com/charts/ loader.js>< /脚本>

这只会改变载入声明。 。


I currently have some problems with the google pie charts. I have a pie chart which is finally working and showing me the data in the pie chart.

The problem what i have now is that when there is no data to show in the Pie chart then nothing will come up. I would like to show an empty pie chart if there is no data to show.

As an alternative, i also would like to always show an empty pie chart and then let the pie chart load dynamically the data in the pie chart, so i can see it happen.

Hopefully you guys can help me! I really appreciate it.

I currently have the following javascript: (UPDATED VERSION)

    <div style="border: 0px solid rgb(201, 0, 1); overflow: hidden; margin: 15px auto; max-width: 100%;">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {packages: ['corechart']});
  google.charts.setOnLoadCallback(drawChart);
</script>
<script type="text/javascript">

var highRiskCategory1 = 0;
var mediumHighRiskCategory1 = 0;
var mediumRiskCategory1 = 0;
var mediumLowRiskCategory1 = 0;
var lowRiskCategory1 = 0;

var xmlURL = "";
var xml;

var firstDraw = true;

// load google first
google.charts.load('current', {
  callback: function () {
    // draw "no data" chart
    drawPiechartblank();
  },
  packages: ['corechart']
});

function loadData() {
  $j.ajax({
    url: xmlURL,
    dataType: 'xml',
    beforeSend: function() {
      $j('#loader').show();
    },
    success: function(data) {
      xml = data;
      $j('#loader').hide();
      createPiechartthree();
    },
    error: function(jqXHR, text) {
      console.log(text);
      drawPiechartblank();
      return;
    }
  });
}

function createPiechartthree(){
  var columns = {};
  var xmlColumns = $j('head', xml);
  xmlColumns.find('headColumn').each(function() {
    var columnName = $j(this).find('columnValue').text();
    var columnID = $j(this).attr('columnid');
    columns[columnName] = (columnID);
  });

  var xmlData = $j('data', xml);

  xmlData.find('item').each(function() {
    $j(this).find('column').each(function() {
      var colID = $j(this).attr("columnid");
      var value = $j(this).find('displayData').text();

      if(colID == columns["Risk category"]){
        if(value === "5. High Risk"){
          highRiskCategory1++;
        }
        else if(value === "4. Medium High Risk"){
          mediumHighRiskCategory1++;
        }
        else if(value === "3. Medium Risk"){
          mediumRiskCategory1++;
        }
        else if(value === "2. Medium Low Risk"){
          mediumLowRiskCategory1++;
        }
        else if(value === "1. Low Risk"){
          lowRiskCategory1++;
        }
      }
    });
  });

  // check for data
  if ((highRiskCategory1 + mediumHighRiskCategory1 + mediumRiskCategory1 + mediumLowRiskCategory1 + lowRiskCategory1) === 0) {
    drawPiechartblank();
  } else {
    drawPiechartthree(highRiskCategory1, mediumHighRiskCategory1, mediumRiskCategory1, mediumLowRiskCategory1, lowRiskCategory1);
  }
}

function drawPiechartthree(highRiskCategory1, mediumHighRiskCategory1, mediumRiskCategory1, mediumLowRiskCategory1, lowRiskCategory1) {
  var data = google.visualization.arrayToDataTable([
    ['Is the counterparty a PEP?', 'Amount'],
    ['Very low', 0],
    ['High Risk', highRiskCategory1],
    ['Medium High Risk', mediumHighRiskCategory1],
    ['Medium Risk', mediumRiskCategory1],
    ['Medium Low Risk', mediumLowRiskCategory1],
    ['Low Risk', lowRiskCategory1],
    ['Very high',  0]
  ]);

  var options = {
    chartArea: {
      // allow room for selection highlight
      bottom: 12,
      left: 12,
      right: 12,
      top: 12,

      height: '100%',
      width: '100%'
    },
    pieHole: 0.5,
    colors: ['#25b578', '#f05023', '#FF944A', '#F6BD53', '#FFE158', '#6FC968', '#8C8886'],
    slices: {
      2: {offset: 0.02},
      3: {offset: 0.02},
      4: {offset: 0.02},
      5: {offset: 0.02},
    },
  };

  var chart = new google.visualization.PieChart(
  document.getElementById('Piechartthree_div'));
  chart.draw(data, options);

  var selectHandler = function(e) {
    var selectedItem = chart.getSelection()[0];
    if (selectedItem) {
      var topping = data.getValue(selectedItem.row, 0);
      console.log(topping);
      if(topping === 'High Risk'){
        window.location.href = '';
      }
      else if(topping === 'Medium High Risk'){
        window.location.href = '';
      }
      else if(topping === 'Medium Risk'){
        window.location.href = '';
      }
      else if(topping === 'Medium Low Risk'){
        window.location.href = '';
      }
      else if(topping === 'Low Risk'){
        window.location.href = '';
      }
    }
  }
  google.visualization.events.addListener(chart, 'select', selectHandler);
}

function drawPiechartblank() {
  var data = google.visualization.arrayToDataTable([
    ['Is the counterparty a PEP?', 'Amount'],
    // blank first column removes legend,
    // use object notation for formatted value (f:)
    ['', {v: 1, f: 'No Data'}]
  ]);

  var options = {
    chartArea: {
      bottom: 12,
      left: 12,
      right: 12,
      top: 12,
      height: '100%',
      width: '100%'
    },
    pieHole: 0.5,
    colors: ['transparent'],
    pieSliceBorderColor: '#9e9e9e',
    // show formatted value from the data
    pieSliceText: 'value',
    // default text style is white
    // won't show in center unless change color
    pieSliceTextStyle: {
      color: '#9e9e9e'
    },
    tooltip: {
      trigger: 'none'
    }
  };

  var chart = new google.visualization.PieChart(
    document.getElementById('Piechartthree_div')
  );
  google.visualization.events.addListener(chart, 'ready', function () {
    // load data on first draw
    if (firstDraw) {
      firstDraw = false;
      loadData();
    }
  });
  chart.draw(data, options);
}
</script>
<div id="Piechartthree_div" style="width: 100%; height: ; position:relative;"><img alt="" id="" src="./attachment_dw.action?attachmentId=2233" style="width: 80px; height: 80px; display: inline-block;  position:absolute; right:50%; top: 50%;" /></div>
</div>

解决方案

in order to draw a pie chart, google requires at least one row, with a value greater than zero

so just hard-code the needed data... 

  var data = google.visualization.arrayToDataTable([
    ['Is the counterparty a PEP?', 'Amount'],
    ['', {v: 1, f: 'No Data'}]
  ]);

using a blank string '' for the row label will prevent the legend from showing
use the formatted value f: to display text in the center of the pie chart
which requires the following options... 

    // show formatted value from the data
    pieSliceText: 'value',

    // default text style is white
    // won't show in center unless change color
    pieSliceTextStyle: {
      color: '#9e9e9e'
    },

to make the chart look empty, use transparent as the color and add a border... 

    colors: ['transparent'],
    pieSliceBorderColor: '#9e9e9e',

see following working snippet... 

google.charts.load('current', {
  callback: drawPiechartblank,
  packages: ['corechart']
});

function drawPiechartblank() {
  var data = google.visualization.arrayToDataTable([
    ['Is the counterparty a PEP?', 'Amount'],
    // blank first column removes legend,
    // use object notation for formatted value (f:)
    ['', {v: 1, f: 'No Data'}]
  ]);

  var options = {
    chartArea: {
      bottom: 12,
      left: 12,
      right: 12,
      top: 12,
      height: '100%',
      width: '100%'
    },
    pieHole: 0.5,
    colors: ['transparent'],
    pieSliceBorderColor: '#9e9e9e',
    // show formatted value from the data
    pieSliceText: 'value',
    // default text style is white
    // won't show in center unless change color
    pieSliceTextStyle: {
      color: '#9e9e9e'
    },
    tooltip: {
      trigger: 'none'
    }
  };

  var chart = new google.visualization.PieChart(
    document.getElementById('Piechartthree_div')
  );
  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="Piechartthree_div"></div>

to start with an empty chart, load google first, draw the blank chart 

// load google first
google.charts.load('current', {
  callback: function () {
    // draw "no data" chart
    drawPiechartblank();
  },
  packages: ['corechart']
});

then wait for the 'ready' event before sending the first request for data... 

  google.visualization.events.addListener(chart, 'ready', function () {
    if (firstDraw) {
      firstDraw = false;
      loadData();
    }
  });

see following snippet, with notes in comments... 

<div style="border: 0px solid rgb(201, 0, 1); overflow: hidden; margin: 15px auto; max-width: 100%;">
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>

var highRiskCategory1 = 0;
var mediumHighRiskCategory1 = 0;
var mediumRiskCategory1 = 0;
var mediumLowRiskCategory1 = 0;
var lowRiskCategory1 = 0;

var xmlURL = "XMLLINK";
var xml;

var firstDraw = true;

// load google first
google.charts.load('current', {
  callback: function () {
    // draw "no data" chart
    drawPiechartblank();
  },
  packages: ['corechart']
});

function loadData() {
  $j.ajax({
    url: xmlURL,
    dataType: 'xml',
    beforeSend: function() {
      $j('#loader').show();
    },
    success: function(data) {
      xml = data;
      $j('#loader').hide();
      createPiechartthree();
    },
    error: function(jqXHR, text) {
      drawPiechartblank();
      return;
    }
  });
}

function createPiechartthree(){
  var columns = {};
  var xmlColumns = $j('head', xml);
  xmlColumns.find('headColumn').each(function() {
    var columnName = $j(this).find('columnValue').text();
    var columnID = $j(this).attr('columnid');
    columns[columnName] = (columnID);
  });

  var xmlData = $j('data', xml);

  xmlData.find('item').each(function() {
    $j(this).find('column').each(function() {
      var colID = $j(this).attr("columnid");
      var value = $j(this).find('displayData').text();

      if(colID == columns["Risk category"]){
        if(value === "5. High Risk"){
          highRiskCategory1++;
        }
        else if(value === "4. Medium High Risk"){
          mediumHighRiskCategory1++;
        }
        else if(value === "3. Medium Risk"){
          mediumRiskCategory1++;
        }
        else if(value === "2. Medium Low Risk"){
          mediumLowRiskCategory1++;
        }
        else if(value === "1. Low Risk"){
          lowRiskCategory1++;
        }
      }
    });
  });

  // check for data
  if ((highRiskCategory1 + mediumHighRiskCategory1 + mediumRiskCategory1 + mediumLowRiskCategory1 + lowRiskCategory1) === 0) {
    drawPiechartblank();
  } else {
    drawPiechartthree(highRiskCategory1, mediumHighRiskCategory1, mediumRiskCategory1, mediumLowRiskCategory1, lowRiskCategory1);
  }
}

function drawPiechartthree(highRiskCategory1, mediumHighRiskCategory1, mediumRiskCategory1, mediumLowRiskCategory1, lowRiskCategory1) {
  var data = google.visualization.arrayToDataTable([
    ['Is the counterparty a PEP?', 'Amount'],
    ['Very low', 0],
    ['High Risk', highRiskCategory1],
    ['Medium High Risk', mediumHighRiskCategory1],
    ['Medium Risk', mediumRiskCategory1],
    ['Medium Low Risk', mediumLowRiskCategory1],
    ['Low Risk', lowRiskCategory1],
    ['Very high',  0]
  ]);

  var options = {
    chartArea: {
      // allow room for selection highlight
      bottom: 12,
      left: 12,
      right: 12,
      top: 12,

      height: '100%',
      width: '100%'
    },
    pieHole: 0.5,
    colors: ['#25b578', '#f05023', '#FF944A', '#F6BD53', '#FFE158', '#6FC968', '#8C8886'],
    slices: {
      2: {offset: 0.02},
      3: {offset: 0.02},
      4: {offset: 0.02},
      5: {offset: 0.02},
    },
  };

  var chart = new google.visualization.PieChart(
  document.getElementById('Piechartthree_div'));
  chart.draw(data, options);

  var selectHandler = function(e) {
    var selectedItem = chart.getSelection()[0];
    if (selectedItem) {
      var topping = data.getValue(selectedItem.row, 0);
      console.log(topping);
      if(topping === 'High Risk'){
        window.location.href = '';
      }
      else if(topping === 'Medium High Risk'){
        window.location.href = '';
      }
      else if(topping === 'Medium Risk'){
        window.location.href = '';
      }
      else if(topping === 'Medium Low Risk'){
        window.location.href = '';
      }
      else if(topping === 'Low Risk'){
        window.location.href = '';
      }
    }
  }
  google.visualization.events.addListener(chart, 'select', selectHandler);
}

function drawPiechartblank() {
  var data = google.visualization.arrayToDataTable([
    ['Is the counterparty a PEP?', 'Amount'],
    // blank first column removes legend,
    // use object notation for formatted value (f:)
    ['', {v: 1, f: 'No Data'}]
  ]);

  var options = {
    chartArea: {
      bottom: 12,
      left: 12,
      right: 12,
      top: 12,
      height: '100%',
      width: '100%'
    },
    pieHole: 0.5,
    colors: ['transparent'],
    pieSliceBorderColor: '#9e9e9e',
    // show formatted value from the data
    pieSliceText: 'value',
    // default text style is white
    // won't show in center unless change color
    pieSliceTextStyle: {
      color: '#9e9e9e'
    },
    tooltip: {
      trigger: 'none'
    }
  };

  var chart = new google.visualization.PieChart(
    document.getElementById('Piechartthree_div')
  );
  google.visualization.events.addListener(chart, 'ready', function () {
    // load data on first draw
    if (firstDraw) {
      firstDraw = false;
      loadData();
    }
  });
  chart.draw(data, options);
}
</script>
<div id="Piechartthree_div" style="width: 100%; height: ; position:relative;"><img alt="" id="" src="./attachment_dw.action?attachmentId=2233" style="width: 80px; height: 80px; display: inline-block;  position:absolute; right:50%; top: 50%;" /></div>
</div>

note: recommend using the newer library loader.js vs. the older jsapi

according to the release notes...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader from now on. 

<script src="https://www.gstatic.com/charts/loader.js"></script>

this only changes the load statement...

这篇关于Java脚本谷歌饼图：如果没有数据显示，则显示一个空的饼图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆