Question

我目前正在使用ASP.NET处理Google Chart并将其连接到数据库（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>

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

Sample Generated Chart

Answer 1

不幸的是，Column Roles（包括工具提示）不适用于材料图表，只有核心

材料 - ＆gt; packages: ['bar'] + google.charts.Bar

核心 - ＆gt; packages: ['corechart'] + google.visualization.BarChart

您可以使用以下配置选项让 Core 接近外观＆amp;感觉材料

theme: 'material'

note 1 ：使用工具提示列时，必须提供所有工具提示内容，它不会将任何内容附加到默认工具提示

请参阅以下工作代码段...

google.charts.load('current', {
  callback: function () {
    // simulate data
    dataValues = [
      {
        customer: 'Customer A',
        percent_submitted: 10
      },
      {
        customer: 'Customer B',
        percent_submitted: 20
      },
      {
        customer: 'Customer C',
        percent_submitted: 30
      },
    ];

    drawchart(dataValues);
  },
  packages: ['corechart']
});

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.visualization.BarChart(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 + '%'},
        dataValues[i].customer + '\nTEST TOOL TIP\n' + dataValues[i].percent_submitted + '%']);
    }

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, 2]);

    chart.draw(view,
      {
          theme: 'material',
          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 src="https://www.gstatic.com/charts/loader.js"></script>
<div id="BarChartsDIV"></div>

note 2 ：要使用HTML工具提示，您必须包含列属性

data.addColumn({type: 'string', role: 'tooltip', p: {html: true}});

请参阅以下工作代码段...

google.charts.load('current', {
  callback: function () {
    // simulate data
    dataValues = [
      {
        customer: 'Customer A',
        percent_submitted: 10
      },
      {
        customer: 'Customer B',
        percent_submitted: 20
      },
      {
        customer: 'Customer C',
        percent_submitted: 30
      },
    ];

    drawchart(dataValues);
  },
  packages: ['corechart']
});

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.visualization.BarChart(document.getElementById('BarChartsDIV'));
    var data = new google.visualization.DataTable();

    data.addColumn('string', 'customer');
    data.addColumn('number', 'percent_submitted')
    // include column property for html tooltips
    data.addColumn({type: 'string', role: 'tooltip', p: {html: true}});


    for (var i = 0; i < dataValues.length; i++) {
        data.addRow([dataValues[i].customer,
        { v: dataValues[i].percent_submitted, f: dataValues[i].percent_submitted + '%'},
        // need to include own styling as well
        '<div class="ggl-tooltip">' + dataValues[i].customer + '<div>TEST TOOL TIP</div><div>' + dataValues[i].percent_submitted + '%</div></div>']);
    }

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, 2]);

    chart.draw(view,
      {
          theme: 'material',
          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%' },

      });
}

.ggl-tooltip {
  border: 1px solid #E0E0E0;
  font-family: Arial, Helvetica;
  font-size: 12pt;
  padding: 12px 12px 12px 12px;
}

.ggl-tooltip div {
  padding-top: 6px;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="BarChartsDIV"></div>

note 3 ：对于 Material 图表，它们默认显示格式化的值（f:），因此您可以在其中添加一些文字，或者在列标题的末尾，这将适用于所有行

请参阅以下工作代码段...

google.charts.load('current', {
  callback: function () {
    // simulate data
    dataValues = [
      {
        customer: 'Customer A',
        percent_submitted: 10
      },
      {
        customer: 'Customer B',
        percent_submitted: 20
      },
      {
        customer: 'Customer C',
        percent_submitted: 30
      },
    ];

    drawchart(dataValues);
  },
  packages: ['bar']
});

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 \n OTHER TOOLTIP TEXT FOR ALL ROWS')

    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]);

    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 src="https://www.gstatic.com/charts/loader.js"></script>
<div id="BarChartsDIV"></div>

note 4 ：虽然不推荐，但是当图表的'ready'事件触发时，可以通过SVG DOM手动修改工具提示...

Answer 2

我需要在Google Charts表格上对Catherine Manzo表示赞赏。从图表选项和bingo !!

中删除 focusTarget

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

chart.opts = {title:"Company Performance",titlePosition:"out",focusTarget:"default",colors:['#66CDAA','#E0FFFF'],pointShape:"circle",hAxis: {format:"$ #,###.##",textPosition:"default",title:"In Thousands",slantedText:true,viewWindowMode:"default"},tooltip:{isHtml:false}};

Answer 3

添加注释。

注意5：

如果您使用tooltip，则只能修改google.visualization：

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

不是google.charts：

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

但是，请务必在theme: 'material'的选项中添加google.visualization以使主题现代化。

Google Chart工具提示不起作用

3 个答案: