Question

我正在使用Uikit（getuikit.com）和Google图表，但使用uk-sortable =“ handle：.uk-sortable-handle”时，图表中的工具提示不显示。

我做了一个jsfiddle，所以您可以看到它目前无法正常工作。

如果我删除uikit.css的链接，它就可以工作（但是我需要这个）。如果我从div中删除uk-sortable =“ handle：.uk-sortable-handle”（但我也需要用它来使磁贴可拖动）工具提示返回，那么它也起作用，所以我知道这是需要做的与uikit。有没有人找到解决这个问题的方法？

谢谢您的帮助。

**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('45', {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'],
          ['04/05/19',  98.5, 94.5],
          ['05/05/19',  94.2, 98.1],
          ['06/05/19',  96.3, 98.9],
          ['07/05/19',  98.2, 96.5],
          ['08/05/19',  94.4, 95.2],
          ['09/05/19',  96.2, 94.5],
          ['10/05/19',  98.8, 97.5],
          ['11/05/19',  96.5, 98.1],
          ['12/05/19',  97.7, 98.5],
          ['13/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:'95%',
               height:'80%'
            },
            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一起使用。

Answer 1

我找到了解决方案，您只需要在uikit.css中注释6055行

.uk-sortable svg {
  pointer-events: none;
}

那是因为悬停没有显示在Google图表上。

使用uikit时未显示Google图表工具提示

1 个答案: