Question

我正在使用一组对象来创建一个使用Google Tables的饼图：

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);
}

我一直在：

“错误：给出的行大小不同于3（表中的列数）。”

任何帮助将不胜感激。

Answer 1

错误来自addRow方法

传递给addRow的数组必须具有与数据表中的列相同数量的值...

在这种情况下，为工具提示添加第三列，
但只有一个值给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 Charts工具提示以显示字符串而不是数字

1 个答案: