android 折线图 点击事件,javascript – 如何使用Chart.js将点击事件添加到我的折线图...

我试图使用

Chart.js将点击事件添加到我的折线图中.我已经启用了我的工具提示,以显示我的折线图中的信息,但我也想添加一个点击方式,让我知道用户点击x轴.现在我只想弹出一个警报,给我在用户点击的x轴上的值.

研究：

我看过documentation of Chart.js,我发现这个方法：.getPointsAtEvent(event)

Calling getPointsAtEvent(event) on your Chart instance passing an

argument of an event, or jQuery event, will return the point elements

that are at that the same position of that event.

canvas.onclick = function(evt){

var activePoints = myLineChart.getPointsAtEvent(evt);

// => activePoints is an array of points on the canvas that are at the same position as the click event. };

我不知道如何使用或在哪里将函数放在我的代码中.如果有人可以帮助我找出可以添加到我的代码的地方,那将是非常感谢！

我的代码：(在javascript中)

//NOTE: the div 'roomForChart' has been already declared as

//creating html code inside of javascript to display the canvas used for the graph

htmlForGraph = "";

document.getElementById('roomForChart').innerHTML += htmlForGraph;

//NOW TO CREATE DATA

//the data for my line chart

var data = {

labels: ["Aug 1", "Aug 2", "Aug 3","Aug 4","Aug 5"], //the x axis

datasets: [

{ //my red line

label: "Usage Plan",

fillColor: "rgba(255,255,255,0.2)", //adds the color below the line

strokeColor: "rgba(224,0,0,1)",//creates the line

pointColor: "rgba(244,0,0,1)",

pointStrokeColor: "#fff",

pointHighlightFill: "#fff",

pointHighlightStroke: "rgba(220,220,220,1)",

data: [1024, 1024, 1024, 1024, 1024]

},

{ //my green line

label: "Overall Usage",

fillColor: "rgba(48,197,83,0.2)",

strokeColor: "rgba(48,197,83,1)",

pointColor: "rgba(48,197,83,1)",

pointStrokeColor: "#fff",

pointHighlightFill: "#fff",

pointHighlightStroke: "rgba(48,197,83,1)",

data: [15, 25, 45, 45, 1500]

},

{ //my blue line

label: "Daily Usage",

fillColor: "rgba(151,187,205,0.2)",

strokeColor: "rgba(151,187,205,1)",

pointColor: "rgba(151,187,205,1)",

pointStrokeColor: "#fff",

pointHighlightFill: "#fff",

pointHighlightStroke: "rgba(151,187,205,1)",

data: [15, 10, 20, 0, 5]

}

] //ending the datasets

}; //ending data

//creating a variable for my chart

var ctx = document.getElementById("myChart").getContext("2d");

//code to create a maximum y value on the chart

var maxUsage = 1024;

var maxSteps = 5;

var myLineChart = new Chart(ctx).Line(data, {

pointDot: false,

scaleOverride: true,

scaleSteps: maxSteps,

scaleStepWidth: Math.ceil(maxUsage / maxSteps),

scaleStartValue: 0

});

//what I have tried but it doesn't show an alert message

ctx.onclick = function(evt){

var activePoints = myLineChart.getPointsAtEvent(evt);

// => activePoints is an array of points on the canvas that are at the same position as the click event.

alert("See me?");

};

对于那些在这里很难看到图表的人,你去：

希望我提供足够的信息来获得一些帮助.如果我需要自己解释,请让我知道.先谢谢你！！！ 🙂