Google图表-工具提示中的图表

Question

我目前有一个散点图，它打开了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逻辑语句。如果有人对如何做这件事有任何想法，我会非常感激的。

Answer 1

按照JeremyFaller的建议，利用图到png技术解决了这一问题。我的回答涉及到一些Django，但我相信大多数人都会对php等有大致的了解。

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

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

​

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，每一个都有自己独特的id --对我上面所做的做了一个小小的修改，可以用来实现这一点。提示:循环从按ID获取元素到绘制图表N次(您拥有的工具提示数)。对于每个隐藏的div，使用它们自己的唯一ids，基本上可以只绘制隐藏图，然后将它们转换为pngs。

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