Google图表中的颜色条(按其值)
Google图表中的颜色条(按其值)
提问于 2016-11-21 09:31:49
我试着用谷歌图表中的条形图来显示它们的价值。我从文档中了解到，我可以指定一个样式角色来为特定的条形图涂上特定的颜色，但我还无法找到一个示例，说明是否可以通过它们的值来显示条形图的颜色。
我发明了一把小提琴来演示我的图表结构。我的数据是一个连续的整数系列。
var data = google.visualization.arrayToDataTable([
['Asset','Days in Stock'],
['4990/473',606],['4990/489',504],['4990/557',159],['4990/559',147],
['4990/578',87],['4990/581',63],['4990/582',53],['4990/586',41],
['4990/590',25],['4990/592',20],['4990/593',5],
]);我还无法从文档中确定实际上是否可以设置条形颜色的阈值范围。理想情况下，我希望能够使用范围格式化程序，但它似乎不适用于条形图类型。
var formatter = new google.visualization.TableColorFormat();
formatter.addRange(0, 60, 'green', '#00ff00');
formatter.format(data, 1);https://jsfiddle.net/dL997yv6/
因此，如果有一种方法可以使用一个理想的格式函数来实现这一点，那么如果没有，那么我将以编程的方式使用我的脚本语言中的数据值来设置每个栏的颜色。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-11-21 12:40:13
彩色格式化程序在表格上工作。
若要按值设置条形图的颜色，请将计算过的列添加到数据视图中，
类似于注释列
看下面的工作片段..。
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Asset','Days in Stock'],
['4990/473',606],['4990/489',504],['4990/557',159],['4990/559',147],
['4990/578',87],['4990/581',63],['4990/582',53],['4990/586',41],
['4990/590',25],['4990/592',20],['4990/593',5],
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
// style column
{
calc: function (dt, row) {
if ((dt.getValue(row, 1) >= 0) && (dt.getValue(row, 1) <= 60)) {
return 'green';
} else if ((dt.getValue(row, 1) > 60) && (dt.getValue(row, 1) <= 100)) {
return 'yellow';
} else {
return 'red';
}
},
type: 'string',
role: 'style'
},
// annotation column
{
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
}
]);
var options = {
title: '',
titleTextStyle: {
fontSize: 16,
bold: true
},
backgroundColor: 'transparent',
chartArea: {
left:80,
top:30,
bottom:60,
right:10
},
legend: {
textStyle: {
fontSize: 11
}
},
vAxis: {
title: 'Asset',
textStyle: {
fontName: 'Arial',
fontSize: 10
},
titleTextStyle: {
fontSize: 12,
italic: false,
bold:true
}
},
hAxis: {
title: 'Days in Stock',
gridlines: {
count: 22
},
textStyle: {
fontName: 'Arial',
fontSize: 11
},
titleTextStyle: {
fontSize: 12,
italic: false ,
bold:true
}
},
pointSize: 3,
pointShape: 'circle',
annotations: {
alwaysOutside: true,
textStyle: {
fontName: 'Arial',
fontSize: 9,
color: '#000000',
opacity: 1
}
}
};
var chartDiv = document.getElementById('chart_div');
var chart = new google.visualization.BarChart(chartDiv);
chart.draw(view, options);
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40716804
复制相关文章
相似问题
腾讯云开发者
