Я использую Uikit (getuikit.com) и диаграммы Google, но подсказки на диаграмме не отображаются при использовании uk-sortable = "handle: .uk-sortable-handle".
Я сделал jsfiddle, чтобы вы могли видеть, что он не работает в данный момент.
Это работает, если я достану ссылку для uikit.css (но она мне нужна). Также это работает, если я удаляю uk-sortable = "handle: .uk-sortable-handle" из div (но мне также нужен этот, чтобы перетаскивать плитку), всплывающие подсказки возвращаются, поэтому я знаю, что это что-то, что нужно сделать с Уикит. Кто-нибудь нашел работу вокруг этого?
Спасибо за помощь.
**HTML**
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!-- The next line rotates HTML tooltips by 30 degrees clockwise. -->
<script type="text/javascript">google.charts.load(ཀྵ', {packages: ['table','controls','corechart','treemap','map','geochart','gauge','timeline']});</script>
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.4/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.4/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.4/js/uikit-icons.min.js"></script>
<div uk-sortable="handle: .uk-sortable-handle">
<div id="chart" style="width: 400px; height: 400px;"></div>
</div>
**JS**
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var dTable2 = google.visualization.arrayToDataTable([
['Date', 'TY', 'LY'],
[ཀ/05/19', 98.5, 94.5],
[ཁ/05/19', 94.2, 98.1],
[ག/05/19', 96.3, 98.9],
[གྷ/05/19', 98.2, 96.5],
[ང/05/19', 94.4, 95.2],
[ཅ/05/19', 96.2, 94.5],
[ཆ/05/19', 98.8, 97.5],
[ཇ/05/19', 96.5, 98.1],
[/05/19', 97.7, 98.5],
[ཉ/05/19', 95.4, 94.3]
]);
var options = {
focusTarget: 'category',
tooltip: {isHtml: true},
legend: {
position: 'top',
alignment: 'center',
textStyle: {
color: '#a5a5a5',
fontSize: 10
}
},
chartArea:{
top: 25,
left: 50,
width:ྛ%',
height:ྌ%'
},
height: 250,
width: 800,
backgroundColor: '#5a5959',
hAxis: {
baselineColor: 'transparent',
gridlines: {
color: 'transparent'
},
textStyle: {
color: '#a5a5a5',
fontSize: 10,
fontName: 'Arial',
bold: false,
italic: false
},
},
vAxis: {
baselineColor: 'transparent',
gridlines: {
color: 'transparent'
},
textStyle: {
color: '#a5a5a5',
fontSize: 10,
bold: false
},
format: '#'
},
colors: ['#99ca3d', '#798860'],
seriesType: 'bars',
series: {1: {type: 'line'}}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart'));
chart.draw(dTable2, options);
}
Here is the jsfiddle
https://jsfiddle.net/justme0112/kqaLmvgu/1/
Я ожидаю, что всплывающие подсказки будут работать с uikit.
Всего 1 ответ
Я нашел решение, вам просто нужно прокомментировать строку 6055 из uikit.css
.uk-sortable svg {
pointer-events: none;
}
Это заставляло зависание не появляться на гугл-чарте.