获取 Google 个图表工具提示以显示字符串而不是数字

Question

我正在使用对象数组创建一个饼图，其中包含 Google 个表：

var sitesData = 
{title: "Practice Session", 
url: "https://app106.studyisland.com/cfw/test/practice-s…
gCount=9b1c6&qgList=bf1b20ed&appRnd=1519683586003", 
time: 3.157999999999999, 
seconds: " 3s"
}

我必须创建一个包含字符串值和时间值的饼图，但我希望工具提示在将鼠标悬停在饼图上时显示秒数。下面是我的代码：

function drawChart() {
    let data = new google.visualization.DataTable();
    data.addColumn('string', 'Title');
    data.addColumn('number', 'Time');

    for (let i = 0; i < sitesData.length; i++) {
        data.addRow([sitesData[i].title, sitesData[i].time]);
    }

    data.addColumn({type: 'string', role: 'tooltip'});
    for (let i = 0; i < sitesData.length; i++) {
        data.addRow([sitesData[i].seconds]);
    }

    let options = {
        tooltip: {isHtml: true},
        'title': 'Sites Logged',
        'width': 600,
        'height': 400,
        pieHole: 0.3
    };

    let chart = new 
 google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

我不断得到：

"Error: Row given with size different than 3 (the number of columns in the table)."

如有任何帮助，我们将不胜感激。

Answer 1

错误来自 addRow 方法

传递给 addRow 的数组的值数必须与数据中的列数相同 table...

在这种情况下，为工具提示添加了第三列，
但只有一个值被赋予 addRow

data.addColumn({type: 'string', role: 'tooltip'});  // <-- third column
for (let i = 0; i < sitesData.length; i++) {
  data.addRow([sitesData[i].seconds]);  // <-- only one value, needs three
}

但您不需要循环两次，只需在 for 循环之前添加工具提示列...

// 3 columns
let data = new google.visualization.DataTable();
data.addColumn('string', 'Title');
data.addColumn('number', 'Time');
data.addColumn({type: 'string', role: 'tooltip'});

for (let i = 0; i < sitesData.length; i++) {
  // 3 values
  data.addRow([sitesData[i].title, sitesData[i].time, sitesData[i].seconds.toString()]);
}

否则，您可以使用工具提示的方法setValue，
如果出于某种原因你需要循环两次......

let data = new google.visualization.DataTable();
data.addColumn('string', 'Title');
data.addColumn('number', 'Time');

for (let i = 0; i < sitesData.length; i++) {
  data.addRow([sitesData[i].title, sitesData[i].time]);
}

data.addColumn({type: 'string', role: 'tooltip'});
for (let i = 0; i < sitesData.length; i++) {
  data.setValue(i, 2, sitesData[i].seconds.toString());  // <-- use setValue instead
}

获取 Google 个图表工具提示以显示字符串而不是数字

Get Google Charts tooltips to display a string instead of a number

charts

google-visualization

pie-chart