Fatal编程技术网
  • charts/
  • Charts 谷歌图表-条形图系列标题不同颜色

Charts 谷歌图表-条形图系列标题不同颜色

charts google-visualization

Charts 谷歌图表-条形图系列标题不同颜色,charts,google-visualization,Charts,Google Visualization,我有一个图表，其中有4个系列（小提琴链接如下）。目前，它有标题1、标题2、标题3和标题4。我想为每个标题文本名称（而不是条）更改不同的颜色；例如，标题1为红色，标题2为蓝色，标题3为绿色，标题4为黑色。有没有办法用不同的颜色来更改所有这些标题 测试谷歌图表 load（'current'，{回调：drawChart，包：['corechart']}）； 函数绘图图（）{ 变量数组=[ [，“今天”，“目标”]， [“标题1”，45534151]， [“标题2”，55606150]， [“标题3

我有一个图表，其中有4个系列（小提琴链接如下）。目前，它有标题1、标题2、标题3和标题4。我想为每个标题文本名称（而不是条）更改不同的颜色；例如，标题1为红色，标题2为蓝色，标题3为绿色，标题4为黑色。有没有办法用不同的颜色来更改所有这些标题


测试谷歌图表
load（'current'，{回调：drawChart，包：['corechart']}）；
函数绘图图（）{
变量数组=[
[，“今天”，“目标”]，
[“标题1”，45534151]，
[“标题2”，55606150]，
[“标题3”，850，920]，
[“标题4”，1050512320]
];
var data=new google.visualization.arrayToDataTable（数组）；
var formatTooltip=new google.visualization.NumberFormat({
模式：“#，##0”
});
formatTooltip.format（数据，1）；
formatTooltip.format（数据，2）；
var formatShort=new google.visualization.NumberFormat({
图案：“短”
});
var view=newgoogle.visualization.DataView（数据）；
view.setColumns（[0,1,1{
计算：函数（dt，行）{
返回formatShort.formatValue（dt.getValue（第1行））；
},
键入：“字符串”，
角色：“注释”
},
2, {
计算：函数（dt，行）{
返回formatShort.formatValue（dt.getValue（第2行））；
},
键入：“字符串”，
角色：“注释”
},
]);
变量选项={
图表：{
标题：“”，
动画：{
期限：2000年，
放松：“出去”，
是的，
}
},
图表区域：{右侧：0
，宽度：“80%”
，身高：“80%”
},
酒吧：{
groupWidth:55//设置每个条的宽度
},
图例：{位置：'top'}，
哈克斯：{
格式：'短'，
//标题:"月份",，
文本样式：{
黑体字：对，
fontSize:10//fontSize用于vAxis标签。
//颜色：“深蓝色”，
},
},
言辞：{
格式：'短'，
标题：“迄今为止的进展”，
网格线：{count:8}
},
宽度：320，
身高：300，
酒吧：“垂直”，
颜色：[“浅蓝色”、“浅灰色”]
};
var chart=new google.visualization.ColumnChart（document.getElementById（'chart_div'））；
图表绘制（视图、选项）；
}
如果要更改轴标签的颜色，
当图表的
'ready'
事件触发时手动更改这些设置，
请参阅以下工作片段

google.charts.load（'current'{
回调：图纸，
软件包：['corechart']
});
函数绘图图（）{
变量数组=[
[，“今天”，“目标”]，
[“标题1”，45534151]，
[“标题2”，55606150]，
[“标题3”，850，920]，
[“标题4”，1050512320]
];
var data=new google.visualization.arrayToDataTable（数组）；
var formatTooltip=new google.visualization.NumberFormat({
模式：“#，##0”
});
formatTooltip.format（数据，1）；
formatTooltip.format（数据，2）；
var formatShort=new google.visualization.NumberFormat({
图案：“短”
});
var view=newgoogle.visualization.DataView（数据）；
view.setColumns（[0,1,1{
计算：函数（dt，行）{
返回formatShort.formatValue（dt.getValue（第1行））；
},
键入：“字符串”，
角色：“注释”
},
2, {
计算：函数（dt，行）{
返回formatShort.formatValue（dt.getValue（第2行））；
},
键入：“字符串”，
角色：“注释”
},
]);
变量选项={
图表：{
标题：“”，
动画：{
期限：2000年，
放松：“出去”，
是的，
}
},
图表区域：{右侧：0
，宽度：“80%”
，身高：“80%”
},
酒吧：{
groupWidth:55//设置每个条的宽度
},
图例：{位置：'top'}，
哈克斯：{
格式：'短'，
//标题:"月份",，
文本样式：{
黑体字：对，
fontSize:10//fontSize用于vAxis标签。
//颜色：“深蓝色”，
},
},
言辞：{
格式：'短'，
标题：“迄今为止的进展”，
网格线：{count:8}
},
宽度：320，
身高：300，
酒吧：“垂直”，
颜色：[“浅蓝色”、“浅灰色”]
};
var container=document.getElementById（'chart_div'）；
var chart=新的google.visualization.ColumnChart（容器）；
google.visualization.events.addListener（图表'ready'，函数（）{
var指数=0；
var colorPallette=[“红色”、“蓝色”、“绿色”、“黑色”]；
Array.prototype.forEach.call（container.getElementsByTagName（'text'）、函数（label）{
如果（（label.getAttribute（'text-anchor'）=='middle'）&（&（label.getAttribute（'fill'）！=='404040'））{
label.setAttribute（'fill'，ColorPallete[colorIndex]）；
彩色索引++；
}
});
});
图表绘制（视图、选项）；
}
Hi@WhiteHat，我想更改标题文本的颜色，而不是列/栏的颜色。我很抱歉没有说清楚。可能吗？谢谢你的回复，有机会的话就去吧。非常感谢你帮了我这么大的忙。 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Google Chart</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {callback: drawChart, packages: ['corechart']});

function drawChart() {
    var array = [
      ["", "Today", "Goal"],
      ["Title1", 4553, 4151],
      ["Title2", 5560, 6150],
      ["Title3", 850, 920],
      ["Title4", 10505, 12320]
    ];

    var data = new google.visualization.arrayToDataTable(array);
    var formatTooltip = new google.visualization.NumberFormat({
        pattern : '#,##0'
    });
    formatTooltip.format(data, 1);
    formatTooltip.format(data, 2);

    var formatShort = new google.visualization.NumberFormat({
        pattern : 'short'
    });

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, {
            calc : function (dt, row) {
              return formatShort.formatValue(dt.getValue(row, 1));
            },
            type : "string",
            role : "annotation"
        },
        2, {
            calc : function (dt, row) {
              return formatShort.formatValue(dt.getValue(row, 2));
            },
            type : "string",
            role : "annotation"
        },
    ]);

    var options = {

        chart: {
          title: ' ',
          animation: {
            duration: 2000,
            easing: "out",
            startup: true,
          }
        },
        chartArea: {right:0
                , width: "80%"
                , height: "80%" 
            },
        bar: { 
            groupWidth: 55  // Set the width for each bar
        },
        legend: {position:'top'},
        hAxis: {
                format: 'short',
                //title: 'Month',
                textStyle : { 
                    bold: true,
                    fontSize: 10 // fontsize for the vAxis label.
                    //color: 'darkblue',
                },
            },
        vAxis: {
                format: 'short',
                title: 'Progress To-Date',
                gridlines: { count: 8 } 
            },
        width:320, 
        height:300,
        bars: 'vertical',
        colors: ["lightblue", "lightgray"]

      };
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(view, options);
}

</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>