【问题标题】:Google Materials Charts (Scatter) not showing trendlines or tooltips谷歌材料图表(散点图)不显示趋势线或工具提示
【发布时间】:2016-09-28 16:34:47
【问题描述】:

我正在使用谷歌图表,在 IE v11 中运行的材料图表,当我执行趋势线和工具提示之类的操作时,它们不再起作用。如果我添加一个列 {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>

【问题讨论】:

    标签: javascript charts google-visualization tooltip


    【解决方案1】:

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

    材料图表处于测试阶段。外观和交互性是 基本上是最终的,但声明选项的方式不是

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

    【讨论】:

    • 我也是这么想的。也没有 ComboChart 的 Material 版本。它正在开发中。
    • 你能添加一个链接到你找到这个的地方吗?
    【解决方案2】:

    不管怎样,您可能加载了错误版本的 Google 图表。您引用了“1”,材料图表应该是“1.1”。像这样:

        google.load('visualization', '1.1', { packages: ['scatter'] });
    

    【讨论】:

    • 是的,我最终确实更新到了 1.1,但没有成功。我会更新我原来的帖子。
    • 这里也没有运气,虽然我正在使用柱形图/条形图
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-03-20
    相关资源
    最近更新 更多