Google Chart工具提示不起作用

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工具提示起作用，必須包含column屬性

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 ：盡管不建議這樣做，但是當圖表的'ready'事件觸發時，可以通過SVG DOM手動修改工具提示。

Answer 2

我需要在Google圖表表格中歸功於Catherine Manzo，以弄清這一點。 從圖表選項和賓果游戲中刪除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：

只有使用google.visualization您才能修改tooltip ：

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

不是google.charts ：

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

但是，請務必在google.visualization選項中包括theme: 'material'以使主題現代化。