Java 如何在彩色谷歌条形图中添加图例（根据颜色显示文本）？_Java_Google Maps_Charts_Google Visualization

Java 如何在彩色谷歌条形图中添加图例（根据颜色显示文本）？

java google-maps charts google-visualization

Java 如何在彩色谷歌条形图中添加图例（根据颜色显示文本）？,java,google-maps,charts,google-visualization,Java,Google Maps,Charts,Google Visualization,我正在谷歌地图上画一张图表。图表有3-5个不同颜色的条形图。由于x轴下的空间不大，我想在右上方添加一个图例。图例应该直观地显示文本的颜色（我不能添加图像，因为我没有声誉=10）我应该在代码中使用哪些参数： var data = new google.visualization.arrayToDataTable([ ['Year', 'ONE', { role: 'style' } ], ['2010', 10, 'color: white'], ['2020', 14,

我正在谷歌地图上画一张图表。图表有3-5个不同颜色的条形图。由于x轴下的空间不大，我想在右上方添加一个图例。图例应该直观地显示文本的颜色（我不能添加图像，因为我没有声誉=10）

我应该在代码中使用哪些参数：

var data = new google.visualization.arrayToDataTable([
    ['Year', 'ONE', { role: 'style' } ],
    ['2010', 10, 'color: white'],
    ['2020', 14, 'color: gray'],
    ['2030', 16, 'color: yellow'],
    ['2040', 22, 'color: green'],
    ['2050', 28, 'color: red']
  ]);


    // Set chart options
    var options = {'title':'Revenue per Year',      //main title
                   'width':500,                     //pixel density 
                   'height':500,                    //pixel density
                    bar: {groupWidth: "95%"},       //width of the vertical bars
                    legend: { position: "right", maxLines: 3 }, //none=dont show legends
                    backgroundColor: { fill:'transparent' },    //!!NOTE: this is needed for transparency and to remove white background
                    titleTextStyle: { color: 'red',fontSize: 24},
                    //options for vertical axis(Y)
                    vAxis: {
                    textStyle:{color: '#FFF',fontSize: 24},
                            slantedText:true, slantedTextAngle:60                   // here you can even use 180
                            },
                    //options for horizontal access(X)
                    hAxis: {
                    textStyle:{color: '#FFF',fontSize: 24},
                            direction:-1, slantedText:true, slantedTextAngle:60             // here you can even use 180
                            }
                   };

听起来你想用一个

注释使用列角色提供，
类似于已在使用的

角色：'style'

列

您可以将注释值添加到数据中，
或者使用视图提供计算列，
如下面的工作片段所示

注意：

默认情况下，注释将显示在条的末端，
在本图表中，条形图的最左侧

注释放置没有标准，
但是您可以手动移动注释，
通过更改

元素上的

属性

请记住，使用

getImageURI

，
如果需要生成图表的png图像

此外，图表会将注释移回其原始位置，
任何时候都有交互性，如列悬停

因此，当活动发生时，必须使用

MutationObserver

将它们移回

google.charts.load（'current'{
回调：图纸，
软件包：['corechart']
});
函数绘图图（）{
var data=new google.visualization.arrayToDataTable([
['Year'，'ONE'，{role:'style'}]，
['2010'，10，'颜色：白色']，
['2020'，14，'颜色：灰色']，
['2030'，16，'颜色：黄色']，
['2040'，22，'颜色：绿色']，
['2050'，28，'颜色：红色']
]);
变量选项={
标题：“年收入”，
宽度：500，
身高：500，
酒吧：{
groupWidth:'95%'
},
图例：{
位置：“无”
},
背景颜色：{
填充：“透明”
},
titleTextStyle：{
颜色：“红色”，
字体大小：24
},
言辞：{
文本样式：{
颜色：“#FFF”，
字体大小：24
},
是的，
倾斜角度：60
},
哈克斯：{
文本样式：{
颜色：“#FFF”，
字体大小：24
},
方向：-1，
是的，
倾斜角度：60
}
};
var view=newgoogle.visualization.DataView（数据）；
view.setColumns（[0,1,2,0{
计算：'字符串化'，
角色：'注释'，
sourceColumn:0，
键入：“字符串”
}]);
var container=document.getElementById（'chart_div'）；
var chart=新的google.visualization.BarChart（容器）；
//移动注释
var observer=新的MutationObserver（函数（）{
Array.prototype.forEach.call（container.getElementsByTagName（'text'）、函数（注释）{
//标识注释--可以是工具提示标签
if（（annotation.getAttribute（'text-anchor'）=='start'）&&
（annotation.getAttribute（'fill'）！='#000000'））{
var chartLayout=chart.getChartLayoutInterface（）；
var annotationBounds=annotation.getBBox（）；
var annotationPadding=4；
annotation.setAttribute（'x'，
chartLayout.getXLocation（0）-annotationBounds.width-annotationPadding
);
}
});
});
观察者，观察（容器{
儿童名单：是的，
子树：真
});
图表绘制（视图、选项）；
}

听起来您想使用