我有一个JS绘制图表的脚本。
我需要add一个click event.
由于图表有一个onHover事件，我认为这没什么大不了的，但我想不通；
在实时版本中，我试图捕捉此类图表的点击事件：LINES CHART WITH FILL & WITHOUT POINTS
var charts = {
// init charts on dashboard
initIndex: function()
{
// init lines chart with fill & without points
this.chart_lines_fill_nopoints.init();
},
// utility class
utility:
{
chartColors: [themerPrimaryColor, "#444", "#777", "#999", "#DDD", "#EEE"],
chartBackgroundColors: ["transparent", "transparent"],
applyStyle: function(that)
{
that.options.colors = charts.utility.chartColors;
that.options.grid.backgroundColor = {colors: charts.utility.chartBackgroundColors};
that.options.grid.borderColor = charts.utility.chartColors[0];
that.options.grid.color = charts.utility.chartColors[0];
},
},
// lines chart with fill & without points
chart_lines_fill_nopoints:
{
// chart data
data:
{
d1: [],
d2: []
},
// will hold the chart object
plot: null,
// chart options
options:
{
grid: {
show: true,
aboveData: true,
color: "#3f3f3f",
labelMargin: 5,
axisMargin: 0,
borderWidth: 0,
borderColor: null,
minBorderMargin: 5,
clickable: true,
hoverable: true,
autoHighlight: true,
mouseActiveRadius: 20,
backgroundColor: {}
},
series: {
grow: {active: false},
lines: {
show: true,
fill: true,
lineWidth: 2,
steps: false
},
points: {show: false}
},
legend: {position: "nw", backgroundColor: null, backgroundOpacity: 0},
yaxis: {min: 0},
xaxis: {ticks: 11, tickDecimals: 0},
colors: [],
shadowSize: 1,
tooltip: true,
tooltipOpts: {
content: "%s : %y.0",
shifts: {
x: -30,
y: -50
},
defaultTheme: false
}
},
// initialize
init: function()
{
$.ajax({
url: $('#url').html() + '/index.php/user/request/loadDashboardChartRequest',
data: {},
success: function(data) {
for (var i in data) {
var dataidx = false;
switch (i) {
case 'delta1':
dataidx = 'd1';
break;
case 'delta2':
dataidx = 'd2';
break;
}
if (dataidx) {
for (var i2 in data[i]) {
charts.chart_lines_fill_nopoints.data[dataidx].push([i2, data[i][i2]]);
}
}
}
charts.utility.applyStyle(charts.chart_lines_fill_nopoints);
charts.chart_lines_fill_nopoints.plot = $.plot(
'#chart_lines_fill_nopoints',
[{
label: "Delta 1 - page loading time",
data: charts.chart_lines_fill_nopoints.data.d1,
lines: {fillColor: "rgba(0,0,0,0.01)"},
points: {fillColor: "#88bbc8"}
},
{
label: "Delta 2 - page + external services loading time",
data: charts.chart_lines_fill_nopoints.data.d2,
lines: {fillColor: "rgba(0,0,0,0.1)"},
points: {fillColor: "#ed7a53"}
}],
charts.chart_lines_fill_nopoints.options);
},
dataType: 'json',
});
}
},
};