javascript - 谷歌图表工具提示不适用于移动设备

标签 javascript charts google-visualization

我正在使用谷歌图表来制作各种图表。我有一个,我现在正在努力处理的条形图。图表本身运行良好,我确实没有任何问题,尤其是在桌面上。

但是,在移动设备上,工具提示不起作用。基本上,当触摸条时它们不会出现。这是我用于创建图表的代码:

   makeRequest('/stocks/quotes/portfolio_performance.json').then(function(result) {
    data = google.visualization.arrayToDataTable(result, false);
    chart = new google.visualization.ColumnChart($('#portfolio_performance')[0]);
    options = {
        fontName: 'Ubuntu',
        isStacked: true,
        legend: {
            position: 'none'
        },
        colors: [
            'transparent', '#dd4814', '#2c8d3a', '#772953', '#e7a413', '#bc271c'
        ],
        tooltip: {
            trigger: 'both'
        }
    };

    chart.draw(data, options);
  }

我曾认为使用 tooltip.trigger:'both' 应该在悬停和选择时激活工具提示,这涵盖了桌面和移动设备的用例。事实上,两者都会触发它在桌面上显示,但在移动设备上选择它仍然不会显示工具提示。

最佳答案

这就是我一直在做的事情。

var isWebView = ionic.Platform.isWebView();
var isIPad = ionic.Platform.isIPad();
var isIOS = ionic.Platform.isIOS();
var isAndroid = ionic.Platform.isAndroid();
var isWindowsPhone = ionic.Platform.isWindowsPhone();

var isMobile = isIOS || isIPad || isAndroid || isWindowsPhone;

if (isMobile) {
  options.tooltip = { trigger: 'selection' };
}

关于javascript - 谷歌图表工具提示不适用于移动设备,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32292666/

相关文章:

javascript - Vue ChartJS 默认禁用数据集

javascript - 通过 AJAX 将 PHP 表单变量传递给 Google Chart

javascript - 选择框选项列表更改检测其他选择框更改未检测到更改

javascript - Chart.js - 鼠标悬停时自定义 css 到数据集

javascript - 如何防止 componentDidMount() 中的Default

javascript - 我如何设置 ChartJS 的样式使其始终位于 div 的底部?

charts - 如何防止 Google Charts 更改 x 轴顺序?

javascript - Google 柱形图在 X 轴上不显示标签

javascript - 来自 Protractor 测试的纯 HTTP 调用

javascript - 按文件夹分组 Istanbul 尔代码覆盖率报告