谷歌图表-工具提示中的图形

Google charts - graph within a tooltip

本文关键字：图形 工具提示 谷歌      更新时间：2023-09-26

我现在有一个散点图，它打开了html工具提示。根据API，您可以在工具提示中使用任何javascript(和html)。我想做的是允许用户不仅将鼠标悬停在数据点上并查看有关它的更多信息，而且还可以在工具提示中看到另一个图形。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        var aPart = (4 - 16) / ({{ lowest_velocity }} - {{ highest_velocity }});
        var bPart = 4 - {{ lowest_velocity }} * aPart;
        var options = {width: {{ img_width }}, height: {{ img_height }}, title: 'Results for model: {{ current_model_selection }}, build: {{ current_build_selection }}', chartArea: {left: 50, top: 100}, backgroundColor: 'transparent', colors: ['#3cb521'], legend: 'none',
            hAxis: {viewWindow: {min: {{ tunnelminx }}, max: {{ tunnelmaxx }}}, agridlines: {count: 0}}, pointSize: 8, fontName: '"Arial"',
            vAxis: {viewWindow: {min: {{ tunnelminy }}, max: {{ tunnelmaxy }}}, agridlines: {count: 0}}, tooltip: { isHtml: true },
            series: [
                {% for lst in velocity_pressure_list %}
                    {% if lst.1 == 0%} {# If pressure == 0 #}
                        {color: 'red', pointSize: aPart * {{lst.0}} + bPart},
                    {% else %} {# Else is pressure so change size #}
                        {pointSize: aPart * {{lst.0}} + bPart},
                    {% endif %}
                {% endfor %}
            ]
        };
        google.load("visualization", "1", {packages: ["corechart", "table"]});
        google.setOnLoadCallback(drawChart);
        var data;
        function drawChart() {
            data = new google.visualization.DataTable();
            data.addColumn('number', 'X');
            {% for column in num_columns %}
                data.addColumn('number', 'Y');
                data.addColumn({type: 'string', label: 'Probe Details', role: 'tooltip', 'p': {'html': true}});
            {% endfor %}
            data.addRows({{ vtime_cd_list_of_lists|safe }});
            var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
            chart.draw(data, options);
            google.visualization.events.addListener(chart, 'select',
                    function () {
                        table.setSelection([
                            {row: chart.getSelection()[0].row}
                        ]);
                    });
            var table = new google.visualization.Table(document.getElementById('table_div'));
            table.draw(data, {showRowNumber: true});
        }
    </script>

{{}}包含的部分是简单的Django变量，同样，{% %}是Django的逻辑语句。如果有人有什么建议，我将不胜感激。

使用JeremyFaller建议的graph to png技术解决了这个问题。我的回答涉及到一些Django，但我相信大多数人会得到php等的总体概念。

我只包含了在工具提示中显示图形的相关部分。同样，在代码的注释中也有重要的信息。滚动到你不会错过任何。

这第一个位只是一个默认的图表(不是从数据库动态创建的)。 

var encoded_img;
var copy_of_data_list;
google.load("visualization", "1", {packages: ["corechart", "table"]});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
    // Create and populate the data table.
    var data = google.visualization.arrayToDataTable([
        ['x', 'Cats', 'Blanket 1', 'Blanket 2'],
        ['A', 1, 1, 0.5],
        ['B', 2, 0.5, 1],
        ['C', 4, 1, 0.5],
        ['D', 8, 0.5, 1],
        ['E', 7, 1, 0.5],
        ['F', 7, 0.5, 1],
        ['G', 8, 1, 0.5],
        ['H', 4, 0.5, 1],
        ['I', 2, 1, 0.5],
        ['J', 3.5, 0.5, 1],
        ['K', 3, 1, 0.5],
        ['L', 3.5, 0.5, 1],
        ['M', 1, 1, 0.5],
        ['N', 1, 0.5, 1]
    ]);
    // Create and draw the visualization.
    var chart_divB = document.getElementById('chart_divB'); //chart_divB is hidden
    var chartB = new google.visualization.LineChart(chart_divB)
    google.visualization.events.addListener(chartB, 'ready', function () {
        encoded_img = '<p><img src="' + chartB.getImageURI() + '"></p>'; //Creates the encoded img
    });
    var options = {title: 'Something random and cutsie about cats',
        width: 600,
        height: 400
    };
    chartB.draw(data, options); //Draws it in the hidden div (required for the png trick)
    copy_of_data_list ={{ main_graph_list_of_lists|safe }} //My Django data from a db
    for (var i = 0; i < copy_of_data_list.length; i++) {
        copy_of_data_list[i][2 * i + 2] += encoded_img; //Adds the encoded png image to the correct tooltip columns (most people will just have one, but I have other things going on)
    }
}

这是第二个"正确的"图表，它是可见的，并有工具提示。

google.load("visualization", "1", {packages: ["corechart", "table"]});
    google.setOnLoadCallback(drawChart);
    var data;
    function drawChart() {
        data = new google.visualization.DataTable();
        data.addColumn('number', 'X');
        {% for column in num_columns %} //More stuff that is not specifically related to this problem
            data.addColumn('number', 'Y');
            data.addColumn({type: 'string', label: 'Probe Details', role: 'tooltip', 'p': {'html': true}});//It is essential that the tooltip column/s is html enabled
        {% endfor %}
        data.addRows(copy_of_data_list); //The modified data thanks to the last 'chart'
        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }

除了一个工具提示图

这种使用png编码图像的技术可用于为每个工具提示创建不同的图表。通过创建N个隐藏div，每个div都有自己唯一的id -对我上面所做的一个小修改可以用来实现这一点。提示:从根据ID获取元素到绘制图表的循环N次(您拥有的工具提示数)。对于每一个隐藏div，它们都有自己唯一的id，你基本上可以绘制隐藏图形，然后将它们转换为png。

注意:如果人们想要一个更好的例子，如果他们不能让不同的工具提示图表工作，我将根据要求制作一个。

相关文章：