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是错误的案例

应该是 - ＆gt; tooltip: {isHtml: true}

Google图表：工具提示中的图表未显示

1 个答案: