谷歌圖表工具提示選項

我是Javascript新手，但我的客戶想要有不同的工具提示背景，邊框和文字顏色。由於我是新人，我不知道應該更改或放入代碼。先謝謝你！（風格無二，在徘徊中產生，不增加額外的那些提示）谷歌圖表工具提示選項

google.charts.load('current', {packages: ['corechart', 'line']}); 
google.charts.setOnLoadCallback(drawBackgroundColor); 

function drawBackgroundColor(transparent) { 
var data = new google.visualization.DataTable(); 
data.addColumn('date', 'X'); 
data.addColumn('number', 'Xaurum Gold Growth'); 


data.addRows([ 
[new Date(2015 , 03 , 15),0.000125], 
[new Date(2015 , 04 , 09),0.000125202590875], 
[new Date(2015, 04, 12), 0.000126019393875], 

]); 
var options = { 
hAxis: { 
    title: 'Time', 
    textStyle:{color: '#FFF'}, 
    titleTextStyle: { 
color: '#fff' 
} 
}, 
vAxis: { 
    title: 'Value', 
    textStyle:{color: '#FFF'}, 
    titleTextStyle: { 
color: '#fff' 
} 
}, 
legend: { 
textStyle: {color: '#fff'} 
}, 
NumberFormat: { 
fractionDigits:15, 
}, 
annotations: { 
boxStyle: { 
stroke: '#765e34', 
strokeWidth: 10, 
} 
}, 
backgroundColor: "transparent", 
colors: ['#876c3c'], 


}; 

var chart = new google.visualization.LineChart(document.getElementById('charta_div')); 
chart.draw(data, options); 
}

來源

2016-10-25 OrangeBud

，如果你想樣式默認的提示，沒有提供自定義的工具提示，

添加以下配置選項

tooltip: {isHtml: true}

，那麼你就可以，如果你需要的款式已經由谷歌定義的東西，使用下面的CSS選擇

.google-visualization-tooltip

，
您可能需要使用!important增加特異性，取決於
如何/在哪裏你的CSS定義

，你可能還需要增加額外的選擇，取決於元素上進行風格，如...

.google-visualization-tooltip span

您可以使用「元素」選項卡中的大多數瀏覽器的開發者工具，
調查中提示當前使用的HTML標籤和樣式。
添加tooltip: {trigger: 'selection'}以鎖定的提示，而調查

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

google.charts.load('current', {packages: ['corechart']}); 
 
google.charts.setOnLoadCallback(drawBackgroundColor); 
 

 
function drawBackgroundColor(transparent) { 
 
var data = new google.visualization.DataTable(); 
 
data.addColumn('date', 'X'); 
 
data.addColumn('number', 'Xaurum Gold Growth'); 
 

 

 
data.addRows([ 
 
[new Date(2015 , 03 , 15),0.000125], 
 
[new Date(2015 , 04 , 09),0.000125202590875], 
 
[new Date(2015, 04, 12), 0.000126019393875], 
 

 
]); 
 
var options = { 
 
hAxis: { 
 
    title: 'Time', 
 
    textStyle:{color: '#FFF'}, 
 
    titleTextStyle: { 
 
color: '#fff' 
 
} 
 
}, 
 
vAxis: { 
 
    title: 'Value', 
 
    textStyle:{color: '#FFF'}, 
 
    titleTextStyle: { 
 
color: '#fff' 
 
} 
 
}, 
 
legend: { 
 
textStyle: {color: '#fff'} 
 
}, 
 
NumberFormat: { 
 
fractionDigits:15, 
 
}, 
 
annotations: { 
 
boxStyle: { 
 
stroke: '#765e34', 
 
strokeWidth: 10, 
 
} 
 
}, 
 
backgroundColor: "transparent", 
 
colors: ['#876c3c'], 
 
// use html tooltips 
 
tooltip: {isHtml: true} 
 

 
}; 
 

 
var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
 
chart.draw(data, options); 
 
}

.google-visualization-tooltip { 
 
    background-color: yellow !important; 
 
    border: 2px solid cyan !important; 
 
} 
 

 
.google-visualization-tooltip span { 
 
    color: magenta !important; 
 
}

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

來源

2016-10-25 23:36:26 WhiteHat

謝謝你的WhiteHat，您隨時隨地幫助我和你的解決方案比工作更lerfect！不能再多謝你了！開始學習JS – OrangeBud

// Add a new column for storing tooltip properties to the end 
data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}}); 
.. 
.. 
// Now the rows you add will have this new property set. last column 
// You will need to do this for remaining rows as required 
[new Date(2015 , 03 , 15),0.000125,createCustomHTMLContent('blue',0.000125)], 


//This is the function that will return html formatted tooltip. 
//only sample. you will need to make changes according to your needs 
function createCustomHTMLContent(color, number) { 
    return '<div style="padding:5px 5px 5px 5px;background-color:"+ color + ";"><span>' + number + "</span></div>" 
}

這可能是幫助Annotate and Tooltip

來源

2016-10-25 22:08:42 Searching

谷歌圖表工具提示選項

回答

相關問題