Google Chart - 负值/正值注释位置 [英] Google Chart - negative/positive values annotation position
本文介绍了Google Chart - 负值/正值注释位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有以下的专栏图表，我想为上面的正值和负面的下面的栏目定位注释。如何做到这一点？
值和注释格式的其他问题 - 如何实现注释的格式化（上面和下面的值）像vAxis？
google.charts.load（'current'，{callback：drawChart，'packages'：['corechart']''language'：'hr'}）; function drawChart（）{var data = new google.visualization.DataTable（）; data.addColumn（日期，基准）; data.addColumn（编号， Vrijednost）; data.addColumn（'number'，'Pred。prema preth。5 dana'）; data.addColumn（'number'，'Pred。prema preth。10 dana'）; data.addColumn（'number'，'Relativna promjena'）; data.addRows（[[new Date（'2017-08-03'），12.10260,12.09797,12.148753333333,0.3199602122016]，[new Date（'2017-08-02'），12.06400,12.16005,12.176186666667，-0.69882870054079]， [new Date（'2017-08-01'），12.14890,12.12988,12.160606666667,0.3129386508133]，[new Date（'2017-07-31'），12.11100,12.13091,12.14988，-0.001651364026678]，[new Date（' '，12.11120,12.1175,12.116093333333,0.11821210392746]，[新日期（'2017-07-27'），12.09690,12.10942,12.079293333333,0.24113757271416]，[新日期（'2017-07-26' ），12.06780,12.10184,12.040733333333,0]，[新日期（'2017-07-25'），12.06780,12.06525,11.992986666667,0.28753781205331]，[新日期（'2017-07-24'），12.03320,12.02595， 11.95908,0.18983547592086]，[新日期（'2017-07-21'），12.01040,11.95357,11.932006666667,0.41468798073707]，[新日期（'2017-07-20'），11.96080,11.9183,11.9194,0.1951832460733]，[新日期（'2017-07-19'），11.93750,11.89151,11.914186666667,0.21154604904174]，[新日期（'2017-07-18'），11.91230,11 [新日期（'2017-07-17'），11.89760,11.93811,11.967046666667，-0.36595680537295]，[新日期（'2017-07-14'），11.94130,11.95136,11.972373333333， 0.068716427416171]，[新日期（'2017-07-13'），11.93310,11.96335,11.975713333333，-0.1848567987152]，[新日期（'2017-07-12'），11.95520,11.94968,11.96142，-0.070212979370754]，[新日期（'2017-07-11'），11.96360,11.95871,11.944226666667,0.19429834846403]，[新日期（'2017-07-10'），11.94040,11.9698,11.93224,0.099761076413629]，[新日期（'2017- 07-07'），11.92850,11.96977,11.934313333333，-0.13478894228354]，[new Date（'2017-07-06'），11.94460,11.93426,11.931026666667，-0.10036297944233]，[new Date（'2017-07-05' ），11.95660,11.86036,11.91198,0.66342251932174]，[新日期（'2017-07-04'），11.87780,11.86771,11.918093333333,0.048011724968622]，[新日期（'2017-07-03'），11.87210,11.88418， [新日期（'2017-06-30'），11.88140,11.92094,11.907506666667， - 0.076 531684958581]]）; var ColumnOpt = {height：300，title：'Relativna promjena vrijednosti [％]'，annotations：{textStyle：{fontName：'Tahoma'，fontSize：9}}，vAxis：{textStyle：{fontName：'Tahoma'，fontSize ：9}，format：＃。＃'％'，viewWindow：{min：data.getColumnRange（4）.min-0.5}}，hAxis：{textStyle：{fontName：'Tahoma'，fontSize：9}， showTextEvery：5}，chartArea：{width：'80％'，height：'80％'}，legend：{position：'none'}，colors：['purple']}; var view2 = new google.visualization.DataView（data）; view2.setColumns（[0,4，{计算值：字符串化，sourceColumn：4，类型：字符串，角色：注释}]）; var container = document.getElementById（'Chart2'）; var chart2 = new google.visualization.ColumnChart（container）; var observer = new MutationObserver（function（）{$ .each（$（'text [text-anchor =start]'），function（index，label）{var labelValue = parseFloat（$（label）.text（） ）; if（labelValue< 0& $（label）.attr（'font-height'）！=='bold'）{var bounds = label.getBBox（）; var chartLayout = container.getChartLayoutInterface（） ; $（label）.attr（'y'，chartLayout.getYLocation（labelValue） - bounds.height - 8）;}}）;}）; observer.observe（容器，{childList：true，subtree：true}）; chart2.draw（view2，ColumnOpt）;}
< div id =Chart2>< / div>< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< script src =https://www.gstatic.com/charts/loader.js>< / script>
关于在这里处理的几个问题这个图表中，注释的属性 - > text-anchor =middle
vs. text-anchor =开始在另一个
格式化注释，使用数字格式化程序
var formatAnnotation = new google.visualization.NumberFormat（{
pattern：ColumnOpt.vAxis.format
}）;
在视图上使用自定义函数，与预定义的stringify function
var view2 = new google.visualization.DataView（data）;
view2.setColumns（[0,4，{
calc：function（dt，row）{
return formatAnnotation.formatValue（dt.getValue（row，4））;
}，
类型：'string'，
角色：'annotation'
}]）;
这会引起数字中逗号的问题 -
需要用十进制数替换对于 parseFloat 来处理好
注解重叠也存在问题
但这段代码会让你更接近...
google.charts.load（'current'，{callback：drawChart，'packages'：['corechart']''language'：'hr'}）; function drawChart（）{var data = new google.visualization.DataTable （）; data.addColumn（日期，基准）; data.addColumn（编号， Vrijednost）; data.addColumn（'number'，'Pred。prema preth。5 dana'）; data.addColumn（'number'，'Pred。prema preth。10 dana'）; data.addColumn（'number'，'Relativna promjena'）; data.addRows（[[new Date（'2017-08-03'），12.10260,12.09797,12.148753333333,0.3199602122016]，[new Date（'2017-08-02'），12.06400,12.16005,12.176186666667，-0.69882870054079]， [new Date（'2017-08-01'），12.14890,12.12988,12.160606666667,0.3129386508133]，[new Date（'2017-07-31'），12.11100,12.13091,12.14988，-0.001651364026678]，[new Date（' '，12.11120,12.1175,12.116093333333,0.11821210392746]，[新日期（'2017-07-27'），12.09690,12.10942,12.079293333333,0.24113757271416]，[新日期（'2017-07-26' ），12.06780,12.10184,12.040733333333,0]，[新日期（'2017-07-25'），12.06780,12.06525,11.992986666667,0.28753781205331]，[新日期（'2017-07-24'），12.03320,12.02595， 11.95908,0.18983547592086]，[新日期（'2017-07-21'），12.01040,11.95357,11.932006666667,0.41468798073707]，[新日期（'2017-07-20'），11.96080,11.9183,11.9194,0.1951832460733]，[新日期（'2017-07-19'），11.93750,11.89151,11.914186666667,0.21154604904174]，[新日期（'2017-07-18'），11.91230,11 [新日期（'2017-07-17'），11.89760,11.93811,11.967046666667，-0.36595680537295]，[新日期（'2017-07-14'），11.94130,11.95136,11.972373333333， 0.068716427416171]，[新日期（'2017-07-13'），11.93310,11.96335,11.975713333333，-0.1848567987152]，[新日期（'2017-07-12'），11.95520,11.94968,11.96142，-0.070212979370754]，[新日期（'2017-07-11'），11.96360,11.95871,11.944226666667,0.19429834846403]，[新日期（'2017-07-10'），11.94040,11.9698,11.93224,0.099761076413629]，[新日期（'2017- 07-07'），11.92850,11.96977,11.934313333333，-0.13478894228354]，[new Date（'2017-07-06'），11.94460,11.93426,11.931026666667，-0.10036297944233]，[new Date（'2017-07-05' ），11.95660,11.86036,11.91198,0.66342251932174]，[新日期（'2017-07-04'），11.87780,11.86771,11.918093333333,0.048011724968622]，[新日期（'2017-07-03'），11.87210,11.88418， [新日期（'2017-06-30'），11.88140,11.92094,11.907506666667， - 0.076 531684958581]]）; var ColumnOpt = {height：300，title：'Relativna promjena vrijednosti [％]'，annotations：{alwaysOutside：true，textStyle：{fontName：'Tahoma'，fontSize：9}，stem：{length：4，color：'透明'}}，vAxis：{textStyle：{fontName：'Tahoma'，fontSize：9}，格式：＃。＃'％'，viewWindow：{min：data.getColumnRange（4）.min-0.5}} ，hAxis：{textStyle：{fontName：'Tahoma'，fontSize：9}，showTextEvery：5}，chartArea：{width：'80％'，height：'80％'}，legend：{position：'none'} ，颜色：['purple']}; var formatAnnotation = new google.visualization.NumberFormat（{pattern：ColumnOpt.vAxis.format}）; var view2 = new google.visualization.DataView（data）; view2.setColumns（[0,4，{calc：function（dt，row）{return formatAnnotation.formatValue（dt.getValue（row，4））;}，type：'string'，role：'annotation'}]） ; var container = document.getElementById（'Chart2'）; var chart2 = new google.visualization.ColumnChart（container）; var observer = new MutationObserver（function（）{$ .each（$（'text [text-anchor =middle]'），function（index，label）{var labelValue = parseFloat（$（label）.text（） .replace（'，'，'。'））; if（labelValue< 0&& $（label）.attr（'fill'）==='＃800080'）{var bounds = label.getBBox（ ）; var chartLayout = chart2.getChartLayoutInterface（）; $（label）.attr（'y'，chartLayout.getYLocation（labelValue）+ bounds.height）;}}）;}）; observer.observe（容器，{childList：true，subtree：true}）; chart2.draw（view2，ColumnOpt）;}
< div id =Chart2>< / div>< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< script src =https://www.gstatic.com/charts/loader.js>< / script>
I've got the following column chart and I'd like to position annotations for positive values above and for negative ones bellow columns. How to do that?
Additional question for values and annotation formatting - how to achieve the formatting of annotations (values above and bellow columns) like vAxis?
google.charts.load('current',{callback:drawChart,'packages':['corechart'],'language':'hr'});
function drawChart()
{
var data = new google.visualization.DataTable();
data.addColumn('date','Datum');
data.addColumn('number','Vrijednost');
data.addColumn('number','Pred. prema preth. 5 dana');
data.addColumn('number','Pred. prema preth. 10 dana');
data.addColumn('number','Relativna promjena');
data.addRows([
[new Date('2017-08-03'),12.10260,12.09797,12.148753333333,0.3199602122016],
[new Date('2017-08-02'),12.06400,12.16005,12.176186666667,-0.69882870054079],
[new Date('2017-08-01'),12.14890,12.12988,12.160606666667,0.3129386508133],
[new Date('2017-07-31'),12.11100,12.13091,12.14988,-0.001651364026678],
[new Date('2017-07-28'),12.11120,12.1175,12.116093333333,0.11821210392746],
[new Date('2017-07-27'),12.09690,12.10942,12.079293333333,0.24113757271416],
[new Date('2017-07-26'),12.06780,12.10184,12.040733333333,0],
[new Date('2017-07-25'),12.06780,12.06525,11.992986666667,0.28753781205331],
[new Date('2017-07-24'),12.03320,12.02595,11.95908,0.18983547592086],
[new Date('2017-07-21'),12.01040,11.95357,11.932006666667,0.41468798073707],
[new Date('2017-07-20'),11.96080,11.9183,11.9194,0.1951832460733],
[new Date('2017-07-19'),11.93750,11.89151,11.914186666667,0.21154604904174],
[new Date('2017-07-18'),11.91230,11.89439,11.937766666667,0.1235543302851],
[new Date('2017-07-17'),11.89760,11.93811,11.967046666667,-0.36595680537295],
[new Date('2017-07-14'),11.94130,11.95136,11.972373333333,0.068716427416171],
[new Date('2017-07-13'),11.93310,11.96335,11.975713333333,-0.1848567987152],
[new Date('2017-07-12'),11.95520,11.94968,11.96142,-0.070212979370754],
[new Date('2017-07-11'),11.96360,11.95871,11.944226666667,0.19429834846403],
[new Date('2017-07-10'),11.94040,11.9698,11.93224,0.099761076413629],
[new Date('2017-07-07'),11.92850,11.96977,11.934313333333,-0.13478894228354],
[new Date('2017-07-06'),11.94460,11.93426,11.931026666667,-0.10036297944233],
[new Date('2017-07-05'),11.95660,11.86036,11.91198,0.66342251932174],
[new Date('2017-07-04'),11.87780,11.86771,11.918093333333,0.048011724968622],
[new Date('2017-07-03'),11.87210,11.88418,11.919446666667,-0.078273604120727],
[new Date('2017-06-30'),11.88140,11.92094,11.907506666667,-0.076531684958581]
]);
var ColumnOpt = {
height: 300,
title: 'Relativna promjena vrijednosti [%]',
annotations: {textStyle: {fontName: 'Tahoma', fontSize: 9}},
vAxis: {textStyle: {fontName: 'Tahoma', fontSize: 9}, format: "#.#'%'",
viewWindow: {min: data.getColumnRange(4).min-0.5}},
hAxis: {textStyle: {fontName: 'Tahoma', fontSize: 9}, showTextEvery: 5},
chartArea: {width: '80%', height: '80%'},
legend: {position: 'none'},
colors: ['purple']
};
var view2 = new google.visualization.DataView(data);
view2.setColumns([0,4,{calc:'stringify',sourceColumn:4,type:'string',role:'annotation'}]);
var container = document.getElementById('Chart2');
var chart2=new google.visualization.ColumnChart(container);
var observer = new MutationObserver(function () {
$.each($('text[text-anchor="start"]'), function (index, label) {
var labelValue = parseFloat($(label).text());
if (labelValue < 0 && $(label).attr('font-height') !== 'bold') {
var bounds = label.getBBox();
var chartLayout = container.getChartLayoutInterface();
$(label).attr('y',chartLayout.getYLocation(labelValue) - bounds.height - 8);
}
});
});
observer.observe(container,{childList: true,subtree: true});
chart2.draw(view2,ColumnOpt);
}
<div id="Chart2"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
解决方案
several issues to deal with here
on this chart, the annotations have attribute --> text-anchor="middle"
vs. text-anchor="start" on the other
to format the annotations, use a number formatter
var formatAnnotation = new google.visualization.NumberFormat({
pattern: ColumnOpt.vAxis.format
});
use a custom function on the view, vs. predefined "stringify" function
var view2 = new google.visualization.DataView(data);
view2.setColumns([0,4,{
calc: function (dt, row) {
return formatAnnotation.formatValue(dt.getValue(row, 4));
},
type: 'string',
role: 'annotation'
}]);
this poses a problem with commas in the number
need to replace with decimal for parseFloat to handle ok
there is also an issue with annotations overlapping
but this snippet should get you closer...
google.charts.load('current',{callback:drawChart,'packages':['corechart'],'language':'hr'});
function drawChart()
{
var data = new google.visualization.DataTable();
data.addColumn('date','Datum');
data.addColumn('number','Vrijednost');
data.addColumn('number','Pred. prema preth. 5 dana');
data.addColumn('number','Pred. prema preth. 10 dana');
data.addColumn('number','Relativna promjena');
data.addRows([
[new Date('2017-08-03'),12.10260,12.09797,12.148753333333,0.3199602122016],
[new Date('2017-08-02'),12.06400,12.16005,12.176186666667,-0.69882870054079],
[new Date('2017-08-01'),12.14890,12.12988,12.160606666667,0.3129386508133],
[new Date('2017-07-31'),12.11100,12.13091,12.14988,-0.001651364026678],
[new Date('2017-07-28'),12.11120,12.1175,12.116093333333,0.11821210392746],
[new Date('2017-07-27'),12.09690,12.10942,12.079293333333,0.24113757271416],
[new Date('2017-07-26'),12.06780,12.10184,12.040733333333,0],
[new Date('2017-07-25'),12.06780,12.06525,11.992986666667,0.28753781205331],
[new Date('2017-07-24'),12.03320,12.02595,11.95908,0.18983547592086],
[new Date('2017-07-21'),12.01040,11.95357,11.932006666667,0.41468798073707],
[new Date('2017-07-20'),11.96080,11.9183,11.9194,0.1951832460733],
[new Date('2017-07-19'),11.93750,11.89151,11.914186666667,0.21154604904174],
[new Date('2017-07-18'),11.91230,11.89439,11.937766666667,0.1235543302851],
[new Date('2017-07-17'),11.89760,11.93811,11.967046666667,-0.36595680537295],
[new Date('2017-07-14'),11.94130,11.95136,11.972373333333,0.068716427416171],
[new Date('2017-07-13'),11.93310,11.96335,11.975713333333,-0.1848567987152],
[new Date('2017-07-12'),11.95520,11.94968,11.96142,-0.070212979370754],
[new Date('2017-07-11'),11.96360,11.95871,11.944226666667,0.19429834846403],
[new Date('2017-07-10'),11.94040,11.9698,11.93224,0.099761076413629],
[new Date('2017-07-07'),11.92850,11.96977,11.934313333333,-0.13478894228354],
[new Date('2017-07-06'),11.94460,11.93426,11.931026666667,-0.10036297944233],
[new Date('2017-07-05'),11.95660,11.86036,11.91198,0.66342251932174],
[new Date('2017-07-04'),11.87780,11.86771,11.918093333333,0.048011724968622],
[new Date('2017-07-03'),11.87210,11.88418,11.919446666667,-0.078273604120727],
[new Date('2017-06-30'),11.88140,11.92094,11.907506666667,-0.076531684958581]
]);
var ColumnOpt = {
height: 300,
title: 'Relativna promjena vrijednosti [%]',
annotations: {alwaysOutside: true, textStyle: {fontName: 'Tahoma', fontSize: 9}, stem: {length: 4, color: 'transparent'}},
vAxis: {textStyle: {fontName: 'Tahoma', fontSize: 9}, format: "#.#'%'",
viewWindow: {min: data.getColumnRange(4).min-0.5}},
hAxis: {textStyle: {fontName: 'Tahoma', fontSize: 9}, showTextEvery: 5},
chartArea: {width: '80%', height: '80%'},
legend: {position: 'none'},
colors: ['purple']
};
var formatAnnotation = new google.visualization.NumberFormat({
pattern: ColumnOpt.vAxis.format
});
var view2 = new google.visualization.DataView(data);
view2.setColumns([0,4,{
calc: function (dt, row) {
return formatAnnotation.formatValue(dt.getValue(row, 4));
},
type: 'string',
role: 'annotation'
}]);
var container = document.getElementById('Chart2');
var chart2=new google.visualization.ColumnChart(container);
var observer = new MutationObserver(function () {
$.each($('text[text-anchor="middle"]'), function (index, label) {
var labelValue = parseFloat($(label).text().replace(',', '.'));
if (labelValue < 0 && $(label).attr('fill') === '#800080') {
var bounds = label.getBBox();
var chartLayout = chart2.getChartLayoutInterface();
$(label).attr('y',chartLayout.getYLocation(labelValue) + bounds.height);
}
});
});
observer.observe(container,{childList: true,subtree: true});
chart2.draw(view2,ColumnOpt);
}
<div id="Chart2"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
这篇关于Google Chart - 负值/正值注释位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
