谷歌圖表額外的矩形裏面的標記

Question

我使用google-chartAPI酒吧風格，但是當我點擊一個酒吧，白色的矩形被添加到酒吧，你可以看到圖片。

我在API文檔中找不到要添加的選項。

我已經找到了css方法的解決方法，這要歸功於Dr. Molle，但是最好知道在選項中停止它。

rect[fill-opacity]{ stroke-width:0 !important; } 

Googlechart bar

Answer 1

的白色矩形是直觀地表明欄中選

，以防止這是唯一的選擇 - >enableInteractivity: false

看到下面的工作片段...

google.charts.load('current', { 
 
    callback: function() { 
 
    var container = document.getElementById('chart_div'); 
 
    var chart = new google.visualization.BarChart(container); 
 

 
    var dataTable = new google.visualization.DataTable(); 
 
    dataTable.addColumn({type: 'string', label: 'Year'}); 
 
    dataTable.addColumn({type: 'number', label: 'Category A'}); 
 
    dataTable.addColumn({type: 'number', label: 'Category B'}); 
 

 
    dataTable.addRows([ 
 
     ['2014', 1000, 2000], 
 
     ['2015', 2000, 4000], 
 
     ['2016', 3000, 6000], 
 
    ]); 
 

 
    chart.draw(dataTable, { 
 
     enableInteractivity: false, 
 
     height: 600, 
 
     legend: { 
 
     position: 'bottom' 
 
     }, 
 
     pointSize: 4, 
 
     tooltip: { 
 
     isHtml: true 
 
     } 
 
    }); 
 
    }, 
 
    packages: ['corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

，如果你想保持一些互動性和唯一失去的選擇，

您可以通過使用'select'事件偵聽器

取消選擇時'select'火災，傳遞一個空數組（[]）與圖表的setSelection方法

請參閱以下工作片段...

google.charts.load('current', { 
 
    callback: function() { 
 
    var container = document.getElementById('chart_div'); 
 
    var chart = new google.visualization.BarChart(container); 
 

 
    var dataTable = new google.visualization.DataTable(); 
 
    dataTable.addColumn({type: 'string', label: 'Year'}); 
 
    dataTable.addColumn({type: 'number', label: 'Category A'}); 
 
    dataTable.addColumn({type: 'number', label: 'Category B'}); 
 

 
    dataTable.addRows([ 
 
     ['2014', 1000, 2000], 
 
     ['2015', 2000, 4000], 
 
     ['2016', 3000, 6000], 
 
    ]); 
 

 
    // use 'select' listener to disable selection 
 
    google.visualization.events.addListener(chart, 'select', function() { 
 
     chart.setSelection([]); 
 
    }); 
 

 
    chart.draw(dataTable, { 
 
     height: 600, 
 
     legend: { 
 
     position: 'bottom' 
 
     }, 
 
     pointSize: 4, 
 
     tooltip: { 
 
     isHtml: true 
 
     } 
 
    }); 
 
    }, 
 
    packages: ['corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>