我是jqCharts的新手。以下是突出显示事件的数据代码。在鼠标悬停时显示数据。但我需要点击图形数据参数上的值而不是鼠标悬停.Below是代码
<script lang="javascript" type="text/javascript">
$(document).ready(function () {
$('#jqChart').jqChart({
title: "dataHighlighting Event",
legend: { visible: false },
animation: { duration: 1 },
series: [
{
type: 'column',
title: 'Column',
data: [['A', 46], ['B', 35], ['C', 68], ['D', 30],
['E', 27], ['F', 85], ['D', 43], ['H', 29]],
cursor: 'pointer'
},
{
type: 'line',
title: 'Line',
data: [['A', 69], ['B', 57], ['C', 86], ['D', 23],
['E', 70], ['F', 60], ['D', 88], ['H', 22]],
cursor: 'pointer'
}
]
});
$('#jqChart').bind('dataHighlighting', function (e, data) {
displayDataOptions(data);
});
});
function displayDataOptions(data) {
var list = $('#listBlock');
list.children().remove();
if (!data) {
return;
}
list.append('<li>data.chart=' + data.chart + '</li>');
list.append('<li>data.series=' + data.series + '</li>');
list.append('<li>data.dataItem=[' + data.dataItem + ']</li>');
list.append('<li>data.index=' + data.index + '</li>');
list.append('<li>data.x=' + data.x + '</li>');
list.append('<li>data.y=' + data.y + '</li>');
list.append('<li>data.shape=' + data.shape + '</li>');
}
</script>
我使用了onclick insted of cursor:'pointer'。但仍有数据参数出现在鼠标悬停上。有人可以提供有关如何在点击图表值时捕获数据的帮助。
答案 0 :(得分:0)
我一直这样做:
function updateChartPos(data){
if (typeof data != 'undefined') {
//SET YOUR GLOBAL VARIABLES
}
}
$('#jqchart').bind('dataHighlighting', function (e, data) {
updateChartPos(data);
});
$(document).on('click', 'canvas', function() {
//Run your function with globals
});
这样做的原因是,如果您使用标准数据点单击选项和jqChart,则用户必须直接单击要注册的事件的数据点。
使用dataHighlighting绑定和画布点击监听器的组合,您允许用户单击图形上的任何位置,它将只使用它们悬停的最后一个数据点(这为它们提供了点击时的误差范围半径)。
您的代码将更改为:
<script lang="javascript" type="text/javascript">
$(document).ready(function () {
$('#jqChart').jqChart({
title: "dataHighlighting Event",
legend: { visible: false },
animation: { duration: 1 },
series: [
{
type: 'column',
title: 'Column',
data: [['A', 46], ['B', 35], ['C', 68], ['D', 30],
['E', 27], ['F', 85], ['D', 43], ['H', 29]],
cursor: 'pointer'
},
{
type: 'line',
title: 'Line',
data: [['A', 69], ['B', 57], ['C', 86], ['D', 23],
['E', 70], ['F', 60], ['D', 88], ['H', 22]],
cursor: 'pointer'
}
]
});
$('#jqChart').bind('dataHighlighting', function (e, data) {
updateChartPos(data);
});
});
function updateChartPos(data) {
window.currentInformation = data;
}
function displayDataOptions() {
var data = window.currentInformation;
var list = $('#listBlock');
list.children().remove();
if (!data) {
return;
}
list.append('<li>data.chart=' + data.chart + '</li>');
list.append('<li>data.series=' + data.series + '</li>');
list.append('<li>data.dataItem=[' + data.dataItem + ']</li>');
list.append('<li>data.index=' + data.index + '</li>');
list.append('<li>data.x=' + data.x + '</li>');
list.append('<li>data.y=' + data.y + '</li>');
list.append('<li>data.shape=' + data.shape + '</li>');
}
$(document).on('click', 'canvas', function() {
displayDataOptions();
});
</script>
希望有所帮助! jqChart是一个了不起的图书馆,自从我买了许可证以来,我一直很满意。如果你遇到其他问题,请查看他们的论坛 - 运行它的人对我提出的任何问题都非常满意。