点击叠加柱状图的一部分时显示不同的数据 [英] Show different data when clicked on a part of stacked column chart

问题描述

  var data_arr = []; 
 var header = ['Location'，
'Online'，{
 role''tooltip'，
 type：'string'，
p：{
 html：true 
} 
}，
'Offline'，{
 role：'tooltip'，
 type：'string'，
p：{ 
 html：true 
} 
}，
'Stale'，{
角色：'tooltip'，
类型：'string'，
p：{
 html：true 
} 
}，
'从未报告过'，{
角色：'tooltip'，
类型：'string' ，
p：{
 html：true 
} 
}，{
类型：'数字'，
角色：'注释'
} 
]; 
 data_arr.push（header）; 
 debugger 
 $ .each（status_by_location，function（k，v）{
 var temp = []; 
 // v.online_gateway_count = 1; 
 // v.offline_gateway_count = 1; 
 // v.stale_gateway_count = 1; 
 // v.never_reported_gateway_count = 1; 
 
 temp.push（k）; 
 temp （v.online_gateway_count）; 
 temp.push（v.online_gateway_datasources.join（< br>））; 
 temp.push（v.offline_gateway_count）; 
 temp。 （v.offline_gateway_datasources.join（< br>））; 
 temp.push（v.stale_gateway_count）; 
 temp.push（v.stale_gateway_datasources.join（< br> ））; 
 temp.push（v.never_reported_gateway_count）; 
 temp.push（v.never_reported_gateway_datasources.join（< br>））; 
 var total_for_each_bar = v.online_gateway_count + v.offline_gateway_count + v.stale_gateway_count + v.never_reported_gateway_count; 
 temp.push（total_for_each_bar）; 
 
 data_arr.push（temp）; 
}）; 
 var data = google.visualization.arrayToDataTable（data_arr）; 
 
 
 var options = {
 isStacked：true，
 title：'Gateway Info By Location'，
 vAxis：{
 title： ''
}，
 hAxis：{
 title：'Location'
}，
 seriesType：'bars'，
 series：{
 5：{
 type：'line'，
 lineWidth：0 
} 
}，
 tooltip：{
 isHtml：true，
触发：'选择'
} 
 //图例：{position：'bottom'，textStyle：{color：'blue'，fontSize：16}} 
}; 
 
 var test = new google.visualization.ComboChart（document.getElementById（'chart_div'））; 
 test.draw（data，options）; 
 google.visualization.events.addListener（test，'select'，selectHandler）; 
 
函数selectHandler（e）{
 var selectedItem = test.getSelection（）[0]; 
 if（selectedItem！= undefined&& selectedItem.row！= null）{
 //获取x轴的位置
 var loc_bar = data.getValue（selectedItem.row，0 ）; 
 var value = data.getValue（selectedItem.row，selectedItem.column）; 
} 
} 
} 
  

这是所有的代码。现在我需要在点击它时显示与黄色条相关的数据。假设我点击了第一栏的黄色栏，那么它应该显示它的数据，但如果我点击第二栏的黄色栏，那么它应该显示关于它的数据。任何想法如何解决这个问题？

在绘制图表之前，任何事件处理程序必须被分配

也建议测试长度在访问数组元素之前

'select'当选中并取消选中条时，会触发事件

getSelection 在后者上返回一个空数组

也没有什么被传递给事件，当它被触发时，
e 将不存在 - > selectHandler（e）

请参阅以下代码片段...

  var test = new google.visualization.ComboChart（document.getElementById（'chart_div'））; 
 
 google.visualization.events.addListener（test，'select'，selectHandler）; 
函数selectHandler（）{
 var selection = test.getSelection（）; 
 if（selection.length> 0）{
 var loc_bar = data.getValue（selection [0] .row，0）; 
 var value = data.getValue（selection [0] .row，selection [0] .column）; 
 var tooltip = data.getValue（selection [0] .row，selection [0] .column + 1）; 
 var columnName = data.getColumnLabel（selection [0] .column）; 
} 
} 
 
 test.draw（data，options）; 
  

var data_arr = [];
var header = ['Location',
  'Online', {
    role: 'tooltip',
    type: 'string',
    p: {
      html: true
    }
  },
  'Offline', {
    role: 'tooltip',
    type: 'string',
    p: {
      html: true
    }
  },
  'Stale', {
    role: 'tooltip',
    type: 'string',
    p: {
      html: true
    }
  },
  'Never Reported', {
    role: 'tooltip',
    type: 'string',
    p: {
      html: true
    }
  }, {
    type: 'number',
    role: 'annotation'
  }
];
data_arr.push(header);
debugger
$.each(status_by_location, function(k, v) {
  var temp = [];
  // v.online_gateway_count = 1;
  // v.offline_gateway_count  = 1;
  // v.stale_gateway_count = 1;
  // v.never_reported_gateway_count = 1;

  temp.push(k);
  temp.push(v.online_gateway_count);
  temp.push(v.online_gateway_datasources.join("<br>"));
  temp.push(v.offline_gateway_count);
  temp.push(v.offline_gateway_datasources.join("<br>"));
  temp.push(v.stale_gateway_count);
  temp.push(v.stale_gateway_datasources.join("<br>"));
  temp.push(v.never_reported_gateway_count);
  temp.push(v.never_reported_gateway_datasources.join("<br>"));
  var total_for_each_bar = v.online_gateway_count + v.offline_gateway_count + v.stale_gateway_count + v.never_reported_gateway_count;
  temp.push(total_for_each_bar);

  data_arr.push(temp);
});
var data = google.visualization.arrayToDataTable(data_arr);


var options = {
  isStacked: true,
  title: 'Gateway Info By Location',
  vAxis: {
    title: ''
  },
  hAxis: {
    title: 'Location'
  },
  seriesType: 'bars',
  series: {
    5: {
      type: 'line',
      lineWidth: 0
    }
  },
  tooltip: {
    isHtml: true,
    trigger: 'selection'
  }
  // legend: {position: 'bottom', textStyle: {color: 'blue', fontSize: 16}}
};

var test = new google.visualization.ComboChart(document.getElementById('chart_div'));
test.draw(data, options);
google.visualization.events.addListener(test, 'select', selectHandler);

function selectHandler(e) {
  var selectedItem = test.getSelection()[0];
  if (selectedItem != undefined && selectedItem.row != null) {
    // gets the location in x axis
    var loc_bar = data.getValue(selectedItem.row, 0);
    var value = data.getValue(selectedItem.row, selectedItem.column);
  }
}
}

This is all the code. Now I need to show the data related with the yellow bar when clicked on it. suppose i clicked on the yellow bar of first bar then it should show data of it but if i click on the yellow bar of second bar then it should show data regarding it. any idea how to solve this?

解决方案

any event handlers must be assigned before drawing the chart

also, recommend testing the length of the selection, before accessing the array elements

the 'select' event is fired both when a bar is selected and de-selected
getSelection returs an empty array on the latter

also, nothing is passed to the event when it is fired
e won't exist --> selectHandler(e)

see following snippet...

var test = new google.visualization.ComboChart(document.getElementById('chart_div'));

google.visualization.events.addListener(test, 'select', selectHandler);
function selectHandler() {
  var selection = test.getSelection();
  if (selection.length > 0) {
    var loc_bar = data.getValue(selection[0].row, 0);
    var value = data.getValue(selection[0].row, selection[0].column);
    var tooltip = data.getValue(selection[0].row, selection[0].column + 1);
    var columnName = data.getColumnLabel(selection[0].column);
  }
}

test.draw(data, options);

这篇关于点击叠加柱状图的一部分时显示不同的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！