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

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>

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

示例生成图表

Answer 1

不幸的是，列角色，包括工具提示，不适用于材料图表，仅适用于核心

材料--> packages: ['bar']+google.charts.Bar

核心--> packages: ['corechart']+google.visualization.BarChart

您可以使用以下配置选项使Core接近Material的外观和感觉

theme: 'material'

注意 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>

注意 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>

注意 3：至于材料图表，它们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>

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