Charts 如何使用谷歌图表在折线图上为每个系列定义不同的工具提示颜色?

Charts 如何使用谷歌图表在折线图上为每个系列定义不同的工具提示颜色?,charts,google-visualization,tooltip,Charts,Google Visualization,Tooltip,如何使用谷歌图表在折线图上为每个系列定义不同的工具提示颜色?我希望一个是绿色的,另一个是黑色的,但不知道如何将颜色关联到该系列 <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("c

如何使用谷歌图表在折线图上为每个系列定义不同的工具提示颜色?我希望一个是绿色的,另一个是黑色的,但不知道如何将颜色关联到该系列

<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);


      function drawChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Day');
        // it must follow data - tooltip - data tooltip
        data.addColumn('number', 'General');
        data.addColumn({type: 'string', role: 'tooltip'});
        data.addColumn('number', 'Filter');
        data.addColumn({type: 'string', role: 'tooltip'});
        data.addColumn({type: 'string', role: 'annotation'});


        data.addRows([
          [new Date(2016, 06, 16), 29.0, '29.0', 28.0, '28.0', ''],
          [new Date(2016, 07, 13), 12.2, '12.2', 10.2, '10.2', ''],
          [new Date(2016, 08, 10), 5.1, '5.1', 3.1, '3.1', ''],
          [new Date(2016, 09, 08), 4.9, '4.9', 4.0, '4.0', ''],
          [new Date(2016, 10, 05), 6.2, '6.2', 4.2, '4.2',  ''],
          [new Date(2016, 11, 03), 6.1, '6.1', 28.0, '28.0',  ''],
          [new Date(2016, 11, 31), 24.7, '24.7', 8.0, '8.0',  ''],
          [new Date(2017, 00, 28), 24.8, '24.8', 8.0, '8.0',  ''],
          [new Date(2017, 01, 25), 6.1, '6.1', 2.0, '2.0',  ''],
          [new Date(2017, 02, 25), 5.3, '5.3', 8.0, '8.0',  ''],
          [new Date(2017, 03, 22), 4.0, '4.0', 8.0, '8.0',  ''],
          [new Date(2017, 04, 20), 4.0, '4.0', 2.0, '2.0', '4.0']
        ]);

        var options = {
          legend: 'none',
          pointSize: 7,
          tooltip: {isHtml: true},  // CSS styling affects only HTML tooltips.

          chart: {
            title: '',
            subtitle: ''
          },
          width: 650,
          height: 230,
          chartArea: {'width': '92%', 'height': '88%'},
          hAxis: {
              format: 'M/d/yy',
              gridlines: {color: 'none'},
              ticks: [new Date(2016, 06, 16), new Date(2016, 07, 13), new Date(2016, 08, 10), new Date(2016, 09, 08), new Date(2016, 10, 05), new Date(2016, 11, 03), new Date(2016, 11, 31), new Date(2017, 00, 28), new Date(2017, 01, 25), new Date(2017, 02, 25), new Date(2017, 03, 22), new Date(2017, 04, 20), ],
              textStyle: {
              color: 'black',    // any HTML string color ('red', '#cc00cc')
              fontName: 'PT Sans', // i.e. 'Times New Roman'
              fontSize: 10 // 12, 18 whatever you want (don't specify px)
              }
            },
          vAxis: {
            format: 'decimal',
            gridlines: {color: 'none'},
            ticks: [0,5,10,15,20,25,30],
            textStyle: {
              color: 'black',    // any HTML string color ('red', '#cc00cc')
              fontName: 'PT Sans', // i.e. 'Times New Roman'
              fontSize: 10 // 12, 18 whatever you want (don't specify px)
              },
            minValue: 0
            },
            colors: ['#000000','#39b54a']
        };


        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }
    </script>
  </head>
  <body>
    <style>
      div.google-visualization-tooltip { background: #000; font-family: 'PT Sans', sans-serif!important; text-align: center!important; padding: 0px!important; }
      div.google-visualization-tooltip > ul > li > span {color: #FFF!important; font-size: 12px!important; text-align: right!important; margin: 0px!important; }
    </style>
    <div id="chart_div" style="width: 650px; height: 230px;"></div>
  </body>
</html>

load(“当前”{packages:[“corechart”]});
google.charts.setOnLoadCallback(drawChart);
函数绘图图(){
var data=new google.visualization.DataTable();
data.addColumn('date','Day');
//它必须遵循数据-工具提示-数据工具提示
data.addColumn('number','General');
addColumn({type:'string',role:'tooltip'});
data.addColumn('number','Filter');
addColumn({type:'string',role:'tooltip'});
addColumn({type:'string',role:'annotation'});
data.addRows([
[新日期(2016年6月16日),29.0,'29.0',28.0,'28.0','',
[新日期(2016年7月13日),12.2,'12.2',10.2,'10.2','',
[新日期(2016年8月10日),5.1,'5.1',3.1,'3.1','',
[新日期(2016年9月8日),4.9,'4.9',4.0,'4.0','',
[新日期(2016年5月10日),6.2,'6.2',4.2,'4.2','',
[新日期(2016年11月3日),6.1,'6.1',28.0,'28.0','',
[新日期(2016年11月31日),24.7,'24.7',8.0,'8.0','',
[新日期(2017,00,28),24.8,'24.8',8.0,'8.0','',
[新日期(2017年1月25日),6.1,'6.1',2.0,'2.0','',
[新日期(2017年2月25日),5.3,'5.3',8.0,'8.0','',
[新日期(2017年3月22日),4.0,'4.0',8.0,'8.0','',
[新日期(2017年4月20日),4.0,'4.0',2.0,'2.0',4.0']
]);
变量选项={
图例:“无”,
点数:7,
工具提示:{isHtml:true},//CSS样式仅影响HTML工具提示。
图表:{
标题:“”,
副标题:“”
},
宽度:650,
身高:230,
图表区:{'width':'92%,'height':'88%},
哈克斯:{
格式:“M/d/yy”,
网格线:{color:'none'},
勾号:[新日期(2016,06,16),新日期(2016,07,13),新日期(2016,08,10),新日期(2016,09,08),新日期(2016,10,05),新日期(2016,11,03),新日期(2016,11,31),新日期(2017,00,28),新日期(2017,01,25),新日期(2017,02,25),新日期(2017,03,22),新日期(2017,04,20),],
文本样式:{
颜色:'黑色',//任何HTML字符串颜色('红色','cc00cc')
fontName:'PT Sans',//即'Times New Roman'
fontSize:10//12,18任意大小(不指定px)
}
},
言辞:{
格式:“十进制”,
网格线:{color:'none'},
滴答声:[0,5,10,15,20,25,30],
文本样式:{
颜色:'黑色',//任何HTML字符串颜色('红色','cc00cc')
fontName:'PT Sans',//即'Times New Roman'
fontSize:10//12,18任意大小(不指定px)
},
最小值:0
},
颜色:['#000000','#39b54a']
};
var chart=new google.visualization.LineChart(document.getElementById('chart_div'));
图表绘制(数据、选项);
}
div.google-visualization-tooltip{背景:#000;字体系列:'PT Sans',Sans serif!重要;文本对齐:居中!重要;填充:0px!重要;}
div.google-visualization-tooltip>ul>li>span{color:#FFF!重要;字体大小:12px!重要;文本对齐:右!重要;边距:0px!重要;}

要在工具提示上使用html/css样式,必须准备好两件事

首先,图表选项,你有

tooltip: {isHtml: true}
还需要在工具提示列上设置
html
属性

data.addColumn({type: 'string', role: 'tooltip', p: {html: true}});
然后您可以使用html作为工具提示列值


请参阅以下工作片段

google.charts.load('current'{
回调:图纸,
软件包:['corechart']
});
函数绘图图(){
var data=new google.visualization.DataTable();
data.addColumn('date','Day');
data.addColumn('number','General');
addColumn({type:'string',role:'tooltip',p:{html:true}});
data.addColumn('number','Filter');
addColumn({type:'string',role:'tooltip',p:{html:true}});
addColumn({type:'string',role:'annotation'});
data.addRows([
[新日期(2016年6月16日),29.0,'29.0',28.0,'28.0',空],
[新日期(2016年7月13日),12.2,'12.2',10.2,'10.2',空],
[新日期(2016年8月10日),5.1,'5.1',3.1,'3.1',空],
[新日期(2016年9月8日),4.9,'4.9',4.0,'4.0',空],
[新日期(2016年10月5日),6.2,'6.2',4.2,'4.2',空],
[新日期(2016年11月3日),6.1,'6.1',28.0,'28.0',空],
[新日期(2016年11月31日),24.7,'24.7',8.0,'8.0',空],
[新日期(2017,00,28),24.8,'24.8',8.0,'8.0',空],
[新日期(2017年1月25日),6.1,'6.1',2.0,'2.0',空],
[新日期(2017年2月25日),5.3,'5.3',8.0,'8.0',空],
[新日期(2017年3月22日),4.0,'4.0',8.0,'8.0',空],
[新日期(2017年4月20日),4.0,'4.0',2.0,'2.0',4.0']
]);
变量选项={
图例:“无”,
点数:7,
工具提示:{isHtml:true},
图表:{
标题:“”,
副标题:“”
},
宽度:650,
身高:230,
图表区:{宽度:“92%”,高度:“88%”,
哈克斯:{
格式:“M/d/yy”,
网格线:{color:'none'},
勾号:[新日期(2016,06,16),新日期(2016,07,13),新日期(2016,08,10),新日期(2016,09,08),新日期(2016,10,05),新日期(2016,11,03),新日期(2016,11,31),新日期(2017,00,28),新日期(2017,01,25),新日期(2017,02,25),新日期(2017,03,22),新日期(2017,04,20),],
文本样式:{
颜色:'黑色',
fontName:“PT SAN”,
字体大小:10
}
},
言辞:{
格式:“十进制”,