javascript - 谷歌图表 : Chart within tooltip not displaying

Question

我正在尝试使用 Google Charts 在图表中显示图表，并且一直在以下部分使用此链接寻求帮助:在工具提示中放置图表

https://developers.google.com/chart/interactive/docs/customizing_tooltip_content

我快完成了，但我遇到的问题是，当我将鼠标悬停在主图表上时，我的工具提示图表的图像没有显示，而是显示了实际的 src= 链接。例如:

<img src"="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADICAYAAADGFbfiAAAYw0lEQ…DyBSCAAALpESBA0uPOVRFAAIHICxAgkR9CvgAEEEAgPQL/A4rwLGxfU1B2AAAAAElFTkSuQmCC">"

出现在图像应该出现的位置。使用 console.log，我将图像中显示的链接打印出来并单击链接。图表显示正常，所以它们只是没有显示在工具提示中。这是我当前的代码:

    var data6Array = [
    [auditsTotal, <?php echo $audits_total;?>, 'blue'],
    [auditsInProgess, <?php echo $audits_inprogress;?>, 'orange'],
    [auditsCompleted, <?php echo $audits_completed;?>, 'green']
    ];

    <?php }?>

    var data6ToolTipArray = [['User','auditsTotal', 'auditsInProgress', 'auditsComplete']];

    var products = <?php echo json_encode($convertedAuditDataObjectsToArrays) ?>;
    for (var i =0; i < products.length; i++){
       var product = products[i];
       var tempArray = [product["userName"], product["auditsTotal"], product["auditsInProgress"], product["auditsComplete"]];
       data6ToolTipArray.push(tempArray);
    }

    var options6= {'title':'Audits',
                    hAxis: {title: 'Audits', titleTextStyle: {color: 'green'}},
                    vAxis: {title: 'Amount', titleTextStyle: {color: 'green'}},
                   'width':900,
                   'height':600,
                   tooltip: {isHTML: true}};

    var tooltipOptions = {
        title: 'User Audits',
        legend: 'none'
    };

    var data6ToolTipData = new google.visualization.arrayToDataTable(data6ToolTipArray);
    var data6ToolTipView = new google.visualization.DataView(data6ToolTipData);

     for (var i = 0; i < data6Array.length; i++) {

      // Set the view for each event's data
      data6ToolTipView.setColumns([0, i + 1]);

      var hiddenDiv = document.getElementById('chart_div6_hidden_div');
      var tooltipChart = new google.visualization.ColumnChart(hiddenDiv);

      google.visualization.events.addListener(tooltipChart, 'ready', function() {

        // Get the PNG of the chart and set is as the src of an img tag.
        console.log(tooltipChart.getImageURI());
        var tooltipImg = '<img src="' + tooltipChart.getImageURI() + '">';

        // Add the new tooltip image to your data rows.
        data6Array[i][3] = tooltipImg;

      });
      tooltipChart.draw(data6ToolTipView, tooltipOptions);
    }


    var data6 = new google.visualization.DataTable();
    data6.addColumn('string', 'Audits3');
    data6.addColumn('number', 'Audits2');
    data6.addColumn({type:'string', role: 'style'});

    // Add a new column for your tooltips.
    data6.addColumn({
      type: 'string',
      label: 'Tooltip Chart',
      role: 'tooltip',
      'p': {'html': true}
    });
    data6.addRows(data6Array);

  var chart6 = new google.visualization.ColumnChart(document.getElementById('chart_div6'));
      chart6.draw(data6, options6);

只需要弄清楚为什么当我将鼠标悬停在原始图表上时工具提示图表没有显示，这让我抓狂!

Answer 1

在图表options中，isHTML是错误的大小写

应该是 --> tooltip: {isHtml: true}