2016-11-28 214 views
1

我嘗試使用谷歌圖表顯示圖表中的圖表,並已使用部分下的這個鏈接,幫助工具提示中圖:配售排行榜提示谷歌圖表:不顯示

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

只需要弄清楚爲什麼當我將鼠標懸停在我原來的圖形工具提示圖形顯示不,它是推動我瘋了!

圖表 options
+0

嘗試在聲明中設定img標籤的src轉義雙引號。在雙引號之前使用\。例如var tooltipImg =''; –

+0

嗨,感謝您的幫助,我試過但沒有運氣我很害怕 – olliejjc16

回答

1

isHTML錯案

它應該是 - >tooltip: {isHtml: true}

+0

非常感謝,讓我瘋狂的應該知道這是愚蠢的,欣賞幫助! – olliejjc16