Google Materials Charts(Scatter)未显示趋势线或工具提示

时间:2015-03-16 21:22:03

标签: javascript charts google-visualization tooltip

我正在使用Google图表,在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>

2 个答案:

答案 0 :(得分:2)

在深入了解我在其网站上发现的Google's Material Chart信息之后:

  

材料图表处于测试阶段。外观和互动性   很大程度上是最终的,但声明选项的方式不是

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

答案 1 :(得分:0)

对于它的价值,您可能一直在加载错误版本的Google图表。您引用了“1”,其中材料图表应为“1.1”。像这样:

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