javascript - 谷歌 Material 图表(散点图)不显示趋势线或工具提示

标签 javascript charts google-visualization tooltip

我正在使用在 IE v11 中运行的 Google 图表和 Material 图表,当我做诸如趋势线和工具提示之类的事情时,它们不再起作用。如果我添加一列 {type: 'string', role: 'tooltip'},也会发生同样的情况,什么也不会出现。 如果我改变

'packages':['scatter']

'packages':['corechart']

google.charts.Scatter(...);

google.visualization.scatterchart(...);

然后它会按照文档中列出的那样工作。我不知道我在这里错过了什么。以下是趋势线不起作用的示例。我搜索了其他问题,但找不到真正的答案。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load('visualization', '1.1', {'packages':['scatter']});
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Y');

        data.addRows([
            [new Date(2015, 0, 7), 2],
            [new Date(2015, 0, 7), 10],
            [new Date(2015, 1, 2), 3],
            [new Date(2015, 1, 3), 4],
            [new Date(2015, 2, 9), 2]
        ]);

        var chart = new google.charts.Scatter(document.getElementById('chart'));

        var options = {

            trendlines: {
                0: {
                    type: 'linear',
                    color: 'black',
                    lineWidth: 2,
                    opacity: 0.3,
                    showR2: true,
                    visibleInLegend: true
                }
            }
        };

        chart.draw(data, options);
    }
</script>

最佳答案

在深入了解 Google's Material Chart 之后我在他们网站上找到的信息:

The Material Charts are in beta. The appearance and interactivity are largely final, but the way options are declared is not.

趋势线和工具提示属于创建图表的选项部分,因为它们需要选项结构来进一步定义它们。同样,截至该日期(2015 年 3 月),Google Material 图表不支持这些功能。如果您想使用趋势线和工具提示之类的东西,您需要使用非物质图表(例如 packages['corechart'] 而不是 packages['scatter'])。

关于javascript - 谷歌 Material 图表(散点图)不显示趋势线或工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29087162/

相关文章:

javascript - npm link gulp 之后任务 'default' 不在你的 gulpfile 中

javascript - 无法在 &lt;input type ="number"> 中设置几个数字

javascript - Typeahead.js 远程调用限制

javascript - Chart.js 中的堆叠条形图,堆栈中具有不同的值

google-apps-script - 修改 Google 图表 - 在我通过脚本(显示日期)动态更新图表标题后,垂直轴 'number format' 恢复为 "from source data"

javascript - 如何在谷歌时间线图表中使用点击功能

javascript - 单击复选框更改 p 文本

ios - 图表显示不正确? iOS 图表库

c# - ASP.NET 条形图标签

javascript - Google 可视化 - AnnotatedTimeLine 上的多行