我目前有一个散点图,其中打开了html工具提示。根据{{3}},您可以在工具提示中使用任何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逻辑语句。如果有人对如何解决这个问题有任何想法,我会非常感激。
答案 0 :(得分:1)
通过使用JeremyFaller建议的图形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)
}
}
这是第二个&#39;适当的&#39;可见且有工具提示的图表。
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。
注意:如果人们想要一个更好的例子,如果他们无法获得不同的工具提示图表,我会根据要求制作一个。