将特定的工具提示添加到 arraytoDataTable [英] add specific tooltip to arraytoDataTable

问题描述

我想在我的图表中添加特定的工具提示.但是，我无法将它们添加到 ArraytoDataTable 中.我在某处读到我应该添加datatable.setcolumnproperty(3, 'role', 'tooltip')".但也许它不在一个有效的地方?还是我必须提前指定角色?

这是我的代码:

google.load('visualization', '1', { 'packages': ['corechart'] } );google.setOnLoadCallback(drawChart);函数 drawChart() {var 数据 = google.visualization.arrayToDataTable([['Kenmerk', 'Belangrijkheid', 'tooltip', { role: 'style' } ],['testa'，{10}，'tooltip1'，'颜色:#394165']，['testb'，{20}，'tooltip2'，'颜色:#0CA5AA']，['testc'，{30}，'tooltip3'，'颜色:#F2941A']，['testd'，{40}，'tooltip4'，'颜色:#E64E67']datatable.setcolumnproperty(3, '角色', '工具提示');]);var view = new google.visualization.DataView(data);view.setColumns([0, 1,{ calc: function(dt, rowIndex) { return dt.getValue (rowIndex, 1).toString() + '%' },来源列:1，类型:字符串"，角色:注释"}，2]);//设置图表选项变量选项 = {宽度:800，高度:600，title: 'Hoe belangrijk vindt u elk kenmerk(以 uitgedrukt 的百分比表示)',vAxis: { 格式: '#\'%\'', maxValue: '100', minValue: '0'},图例:{位置:'无'}，条:{ groupWidth:'75％'}，};//实例化并绘制我们的图表，传入一些选项.var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));图表绘制(视图，选项)；}<p></p><div id="columnchart_values" style="width: 800px; height: 600px;">

解决方案

我认为您定义工具提示的方式是错误的.检查这个小提琴，看看如何正确地做到这一点.

在这一行中，

var data = google.visualization.arrayToDataTable([['Kenmerk', 'Belangrijkheid', 'tooltip', { role: 'style' } ]

像这样替换工具提示，

var data = google.visualization.arrayToDataTable([['Kenmerk', 'Belangrijkheid', {label: 'tooltip', role: 'tooltip'},{ role: 'style' } ],

检查这个小提琴以获取更多信息http://jsfiddle.net/ovxLjqyn/

I would like to add specific tooltips to my graph. However, I have trouble adding them in the ArraytoDataTable. I have read somewhere that I should add "datatable.setcolumnproperty(3, 'role', 'tooltip')". But maybe it is not in a valid place? Or do I have to specify the role earlier?

This is my code:

google.load('visualization', '1', { 'packages': ['corechart'] } );

google.setOnLoadCallback(drawChart);

function drawChart() {


var data = google.visualization.arrayToDataTable([
    ['Kenmerk', 'Belangrijkheid', 'tooltip', { role: 'style' } ],
    ['testa', {10}, 'tooltip1', 'color: #394165'],
    ['testb', {20}, 'tooltip2', 'color: #0CA5AA'],
    ['testc', {30}, 'tooltip3', 'color: #F2941A'],
    ['testd', {40}, 'tooltip4', 'color: #E64E67']
    datatable.setcolumnproperty(3, 'role', 'tooltip');
  ]);

var view = new google.visualization.DataView(data);
  view.setColumns([0, 1,
                   { calc: function(dt, rowIndex) { return dt.getValue (rowIndex, 1).toString() + '%' },
                     sourceColumn: 1,
                     type: "string",
                     role: "annotation" },
                   2]);



  // Set chart options

var options = {
    width: 800,
    height: 600,
    title: 'Hoe belangrijk vindt u elk kenmerk (in percentages uitgedrukt)',
    vAxis:  { format: '#\'%\'', maxValue: '100', minValue: '0'},
    legend: { position: 'none'},
    bar: { groupWidth: '75%' },
          };


  // Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
  chart.draw(view, options);
}
 </script>
  <p>
 </p>
 <div id="columnchart_values" style="width: 800px; height: 600px;">
 </div>

解决方案

I think the way you defined the tool tip is wrong. Check this fiddle to see how to do it correctly.

In this line,

var data = google.visualization.arrayToDataTable([
['Kenmerk', 'Belangrijkheid', 'tooltip', { role: 'style' } ]

Replace tool tip like this,

var data = google.visualization.arrayToDataTable([
['Kenmerk', 'Belangrijkheid', {label: 'tooltip', role: 'tooltip'},{ role: 'style' } ],

Check this fiddle for more information http://jsfiddle.net/ovxLjqyn/

这篇关于将特定的工具提示添加到 arraytoDataTable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！