谷歌圖表工具提示不工作

我目前正在使用ASP.NET的谷歌圖表，並將其連接到數據庫（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

來源

2016-10-20 Jeffren

你想要什麼工具提示顯示：刪除的屬性在下面的代碼突出顯示？ –

@MarcusH您好馬庫斯，我想顯示客戶，提交百分比和工具提示1 – Jeffren

如果您只是在循環之後編寫圖表，它會工作嗎？放「chart.draw（data）;」在循環結束並註釋掉 –

不幸的是，Column Roles，包括提示，不材料圖表工作，只有核心

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

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

您可以使用下面的配置選項來獲得核心接近材質的外觀&感覺

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'事件觸發...

來源

2016-10-20 12:02:19 WhiteHat

之後的部分它可以工作，謝謝！ – Jeffren

'note 3'幫助我..謝謝 –

你能詳細說明並說明如何讓酒吧不同的顏色？謝謝，我試過你的工作代碼，但堆棧設置欄顏色 –

我需要爲了證明這一點，請在Google圖表表單上給予凱瑟琳曼佐的信任。從圖表中刪除focusTarget選項和賓果！

凱瑟琳萬三說：我終於回去，並比較了我的新圖表的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}};

來源

2018-01-24 22:21:33 Juls

谷歌圖表工具提示不工作

回答

相關問題