Javascript 在google图表树状图中显示值_Javascript_Charts_Google Visualization_Treemap

Javascript 在google图表树状图中显示值

javascript charts google-visualization

Javascript 在google图表树状图中显示值,javascript,charts,google-visualization,treemap,Javascript,Charts,Google Visualization,Treemap,我使用谷歌图表创建了一个树状图。代码如下： <html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['treemap']}); google

我使用谷歌图表创建了一个树状图。
代码如下：

<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['treemap']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
  ['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
  ['Global',    null,                 0,                               0],
  ['America',   'Global',             20,                               0],
  ['Europe',    'Global',             30,                               0],
  ['Asia',      'Global',             10,                               0],
  ['Australia', 'Global',             40,                               0],
  ['Africa',    'Global',             30,                               0],
]);
tree = new 
google.visualization.TreeMap(document.getElementById('chart_div'));
google.visualization.events.addListener(tree, 'select', function () {
  tree.setSelection([]);
});
tree.draw(data, {
  headerHeight: 15,
  fontColor: 'black',
  showScale: true,
  maxDepth: 2
});
}
</script>
</head>
<body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>


load（'current'，{'packages'：['treemap']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
[“地点”、“母公司”、“市场交易量（规模）”、“市场增减（颜色）”，
['Global'，null，0,0]，
['美国'，'全球'，20,0]，
['欧洲'，'全球'，30,0]，
[‘亚洲’、‘全球’、10、0]，
['Australia'，'Global'，40,0]，
['非洲'，'全球'，30,0]，
]);
树=新的
google.visualization.TreeMap（document.getElementById（'chart_div'）；
google.visualization.events.addListener（树'select'，函数（）{
tree.setSelection（[]）；
});
树。绘制（数据{
校长：15，
fontColor:'黑色'，
showScale：没错，
最大深度：2
});
}

它将树图显示为：

现在，我想在树形图上显示市场交易量（大小）的值（无需任何鼠标操作）。因为它只有一层，所以可以直接显示值，而无需任何计算。

我在文档中搜索了一下，但没有找到任何类似的内容。

这里做了一些假设

1）您不想显示全局-->

Global（0）

2）您不希望修改数据表中的值或其加载方式

使用对象表示法，我们可以提供值（

v:

）和格式化值（

f:

）

图表将显示格式化的值，但在确定树顺序时使用该值

这允许我们在不影响关系的情况下更改显示，
如果您有多个图层的数据

因此，

DataView

用于修改值
使用

setColumns

方法为标签提供计算列

var view = new google.visualization.DataView(data);
view.setColumns([{
  calc: function (dt, row) {
    var rowValue;

    if (row === 0) {
      rowValue = dt.getValue(row, 0);  // value for global
    } else {
      // change display value by changing formatted value
      rowValue = {
        v: dt.getValue(row, 0),
        f: dt.getValue(row, 0) + '(' + dt.getFormattedValue(row, 2) + ')'
      };
    }

    return rowValue;
  },
  label: data.getColumnLabel(0),
  type: data.getColumnType(0)
}, 1, 2, 3]);

请参阅以下工作片段

google.charts.load（'current'{
包：['treemap']
}).然后（函数（）{
var data=google.visualization.arrayToDataTable([
[“地点”、“母公司”、“市场交易量（规模）”、“市场增减（颜色）”，
['Global'，null，0,0]，
['美国'，'全球'，20,0]，
['欧洲'，'全球'，30,0]，
[‘亚洲’、‘全球’、10、0]，
['Australia'，'Global'，40,0]，
['非洲'，'全球'，30,0]，
]);
var view=newgoogle.visualization.DataView（数据）；
view.setColumns([{
计算：函数（dt，行）{
var值；
如果（行===0）{
rowValue=dt.getValue（行，0）；//全局值
}否则{
//通过更改格式化值来更改显示值
行值={
v:dt.getValue（行，0），
f:dt.getValue（行，0）+'（'+dt.getFormattedValue（行，2）+'）”
};
}
返回行值；
},
标签：data.getColumnLabel（0），
类型：data.getColumnType（0）
}, 1, 2, 3]);
var tree=new google.visualization.TreeMap（document.getElementById（'chart_div'）；
google.visualization.events.addListener（树'select'，函数（）{
tree.setSelection（[]）；
});
树。绘制（视图{
校长：15，
fontColor:'黑色'，
showScale：没错，
最大深度：2
});
});
感谢WhiteHat让我走上正轨。利用他的答案，我找到了另一种实现这一点的方法，与最初的例子相差较小
这也允许按ID嵌套。在下面的示例中，您可以将USA显示为“美利坚合众国”，但下面的州会链接回“USA”ID
对我来说更重要的是，它可以让两个项目具有相同的标签。注意，在欧洲有一个伦敦>英国和美国>加拿大>安大略省

google.charts.load（'current'，{'packages'：['treemap']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
[“地点”、“母公司”、“市场交易量（规模）”、“市场增减（颜色）”，
['Global'，null，0,0]，
['美国'，'全球'，0,0]，
['欧洲'，'全球'，30,0]，
[‘亚洲’、‘全球’、10、0]，
['Australia'，'Global'，40,0]，
['非洲'，'全球'，30,0]，
[{v:'美国'，f:'美利坚合众国'}，'美国'，20，0]，
[‘墨西哥’、‘美国’、24、12]，
['加拿大'，'美国'，16，-23]，
[‘安大略’、‘加拿大’、12、-9]，
[‘阿尔伯塔’、‘加拿大’、24、13]，
[‘英国’、‘欧洲’、21、-5]，
[{v:'123'，f:'London'}，'UK'，21，-5]，
[{v:'456'，f:'London'}，'Ontario'，21，-5]，
['Ohio'，'USA'，12,3]，
['Rhode Island'，'USA'，24,4]
]);
树=新的
google.visualization.TreeMap（document.getElementById（'chart_div'）；
树。绘制（数据{
minColor:“#f00”，
中色：“#ddd”，
maxColor:“#0d0”，
校长：15，
fontColor:'黑色'
});
}
@WhiteHat是的，我想展示-->澳大利亚（40）--而不仅仅是-->澳大利亚。