Javascript 谷歌图表工具提示不起作用

我目前正在使用ASP.NET开发Google图表，并将其连接到数据库（SQL Server）。但是我在尝试自定义工具提示时遇到了一个问题

以下是标题代码：

<script src="js/jquery/jquery-1.10.2.js" type="text/javascript"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('1.1', { 'packages': ['bar'] });

</script>
<script type="text/javascript">
    $(function () {
        $.ajax({
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json',
            url: 'sample_page.aspx/GetChartData',
            data: '{}',
            success: function (response) {
                drawchart(response.d); // calling method
            },

            error: function () {
                alert("Error Loading Data");
            }
        });
    })

    function drawchart(dataValues) {
        // Callback that creates and populates a data table,
        // instantiates the pie chart, passes in the data and
        // draws it.

        // Instantiate and draw our chart, passing in some options
        var chart = new google.charts.Bar(document.getElementById('BarChartsDIV'));
        var data = new google.visualization.DataTable();

        data.addColumn('string', 'customer');
        data.addColumn('number', 'percent_submitted')
        data.addColumn({type: 'string', role: 'tooltip'});


        for (var i = 0; i < dataValues.length; i++) {
            data.addRow([dataValues[i].customer,
            { v: dataValues[i].percent_submitted, f: dataValues[i].percent_submitted+ '%'},'TEST TOOL TIP']);
        }

        var view = new google.visualization.DataView(data);
        view.setColumns([0, 1, 2]);

        chart.draw(view,
          {
              tooltip: { isHtml: true},
              title: "",
              legend: { position: 'none' },
              bars: 'horizontal', // Required for Material Bar Charts.
              axes: {
                  x: {
                      0: { side: 'top', label: '' }, // Top x-axis.
                  },
                  y: {
                      0: { label: '' } //Side y-axis
                  }

              },
              bar: { groupWidth: '70%' },

          });
    }
</script>

load（'1.1'，{'packages'：['bar']}）；
$（函数（）{
$.ajax({
键入：“POST”，
数据类型：“json”，
contentType:'应用程序/json'，
url:'sample_page.aspx/GetChartData'，
数据：“{}”，
成功：功能（响应）{
drawchart（response.d）；//调用方法
},
错误：函数（）{
警报（“加载数据错误”）；
}
});
})
函数绘图图（数据值）{
//创建并填充数据表的回调，
//实例化饼图，传入数据并
//画它。
//实例化并绘制图表，传入一些选项
var chart=new google.charts.Bar（document.getElementById（'BarChartsDIV'）；
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'customer'）；
data.addColumn（'number'，'percent_submitted'）
addColumn（{type:'string'，role:'tooltip'}）；
对于（var i=0；i

不幸的是，工具提示不起作用。工具提示上仅显示客户名称和百分比

不幸的是，包括工具提示在内的工具提示不能用于材质图表，只能用于核心

材料-->

包装：['bar']

+

google.charts.bar

核心-->

软件包：['corechart']

+

google.visualization.BarChart

您可以使用以下配置选项使Core接近材质的外观

主题：“材料”

注意1：使用工具提示列时，必须提供所有工具提示内容，它不会在默认工具提示中附加任何内容

请参阅以下工作片段

google.charts.load（'current'{
回调：函数（）{
//模拟数据
数据值=[
{
顾客：“顾客A”，
提交百分比：10
},
{
客户：“客户B”，
提交百分比：20
},
{
客户：“客户C”，
提交百分比：30
},
];
绘图（数据值）；
},
软件包：['corechart']
});
函数绘图图（数据值）{
//创建并填充数据表的回调，
//实例化饼图，传入数据并
//画它。
//实例化并绘制图表，传入一些选项
var chart=new google.visualization.BarChart（document.getElementById（'BarChartsDIV'）；
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'customer'）；
data.addColumn（'number'，'percent_submitted'）
addColumn（{type:'string'，role:'tooltip'}）；
对于（var i=0；i

---

我需要感谢凯瑟琳·曼佐（Catherine Manzo）在谷歌图表表单上找到了这一点。从图表选项和宾果中删除focusTarget

Catherine Manzo说：我终于回去比较了html代码 对于我的新图表和夏季制作的图表，当工具提示 工作。我意识到新代码中有一个额外的属性 （focusTarget）当我删除它时，工具提示功能开始了 又开始工作了！要删除的属性在代码中高亮显示 下:

更值得注意的是

注5:

如果使用

google.visualization

，则只能修改

工具提示

new google.visualization.LineChart(divChart).draw(dataTable,options);

不是
google.charts
：

new google.charts.Line(divChart).draw(dataTable,options);

但是，请确保在
google.visualization
的选项中包含
theme:“material'
，以使主题现代化。
您希望工具提示显示什么？@MarcusH Hi marcus，我想显示客户、提交百分比和工具提示1如果您只是在循环后编写图表，效果如何？在循环结束后放置“chart.draw（data）；”，并在结束后注释出零件。您能详细说明并演示如何获得不同颜色的条形图吗？谢谢，我尝试了你的工作代码，但是在设置条形图颜色时堆栈谢谢，v:和f:提示真的很有用
new google.charts.Line(divChart).draw(dataTable,options);