工具提示 html 谷歌图表

Question

我在 JS 中有如下提示设置

function createDashboard4() {
      var json_results = getData('http://localhost:9999/countcarbytype')
      data_results = []
      var Header = ['car Type', 'count', 'region',{'type': 'string', 'role': 'tooltip', 'p': {'html': true}}];
      data_results.push(Header)
      for (var i = 0; i < json_results.length; i++) {
        var value = json_results[i];
        var URL = ""+value["imageURL"][0]

        data_results.push([value["_id"]["title"], value["countofcars"], value["_id"]["region"]],createCustomHTMLContent(URL,value["_id"]["title"], value["countofcars"], value["_id"]["region"]))
      }
      console.log(data_results)
      var data = google.visualization.arrayToDataTable(data_results);


      // Define a StringFilter control for the 'Name' column
      var stringFilter = new google.visualization.ControlWrapper({
        'controlType': 'StringFilter',
        'containerId': 'control4',
        'options': {
          'filterColumnLabel': 'region'
        }
      });

      // Define a table visualization
      var table = new google.visualization.ChartWrapper({
        'chartType': 'BarChart',
        'containerId': 'chart4',
        'options': { 'height': 400, 'width': 500, 'title': 'Count of cars by Model Type', 'legend': 'none','tooltip': { isHtml: true } },
        'view': { 'columns': [0, 1] }
      });

      // Create the dashboard.
      var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard')).
        // Configure the string filter to affect the table contents
        bind(stringFilter, table).
        // Draw the dashboard
        draw(data);

      return stringFilter;
    }

    google.setOnLoadCallback(drawVisualization);

我做了一个 createCustomHTMLContent 的实现

function createCustomHTMLContent(imageURL, title,  totalCount, region) {
  return '<div style="padding:5px 5px 5px 5px;">' +
    '<img src="' + imageURL + '" style="width:75px;height:50px"><br/>' +
    '<table class="medals_layout">' + '<tr>' +
    '<td><img src="https://upload.wikimedia.org/wikipedia/commons/1/15/Gold_medal.svg" style="width:25px;height:25px"/></td>' +
    '<td><b>' + title + '</b></td>' + '</tr>' + '<tr>' +
    '<td><img src="https://upload.wikimedia.org/wikipedia/commons/1/15/Gold_medal.svg" style="width:25px;height:25px"/></td>' +
    '<td><b>' + totalCount + '</b></td>' + '</tr>' + '<tr>' +
    '<td><img src="https://upload.wikimedia.org/wikipedia/commons/5/52/Bronze_medal.svg" style="width:25px;height:25px"/></td>' +
    '<td><b>' + region + '</b></td>' + '</tr>' + '</table>' + '</div>';
}

但是它给了我一个错误未捕获的错误：第 0 行有 3 列，但必须有 4。我确定我已经按照程序添加了 HTML 工具提示。

我做错了什么？

编辑 1：

样本数据：

[{"_id":{"title":"Mercedes Benz C Class 220 CDI Elegance AT (2009) in Mumbai","region":"Mumbai"},"countofcars":2,"imageURL":["https://imguct3.aeplcdn.com/img/340x192/lis/201807/1405424_71524_1_1530437796289.jpeg?v=27","https://imguct3.aeplcdn.com/img/340x192/lis/201807/1405424_71524_1_1530437796289.jpeg?v=27"]},{"_id":{"title":"Mercedes Benz C Class 220 CDI Sport (2012) in Coimbatore","region":"Coimbatore"},"countofcars":2,"imageURL":["https://imguct3.aeplcdn.com/img/340x192/lis/201806/1402641_71493_1_1530177529608.jpeg?v=27","https://imguct3.aeplcdn.com/img/340x192/lis/201806/1402641_71493_1_1530177529608.jpeg?v=27"]}

Answer 1

数组的右括号不合适...

改变这个...

data_results.push([value["_id"]["title"], value["countofcars"], value["_id"]["region"]],createCustomHTMLContent(URL,value["_id"]["title"], value["countofcars"], value["_id"]["region"]))

到这个……

data_results.push([value["_id"]["title"], value["countofcars"], value["_id"]["region"],createCustomHTMLContent(URL,value["_id"]["title"], value["countofcars"], value["_id"]["region"])]);

编辑

还需要在图表视图中添加工具提示栏...

改变...

'view': { 'columns': [0, 1] }

到...

'view': { 'columns': [0, 1, 3] }