我试图使用
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 <div id="roomForChart"></div> //creating html code inside of javascript to display the canvas used for the graph htmlForGraph = "<canvas id='myChart' width ='500' height='400'>"; 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,0.2)",//adds the color below the line strokeColor: "rgba(224,1)",//creates the line pointColor: "rgba(244,pointStrokeColor: "#fff",pointHighlightFill: "#fff",pointHighlightStroke: "rgba(220,220,data: [1024,1024,1024] },{ //my green line label: "Overall Usage",fillColor: "rgba(48,197,83,strokeColor: "rgba(48,pointColor: "rgba(48,pointHighlightStroke: "rgba(48,data: [15,25,45,1500] },{ //my blue line label: "Daily Usage",fillColor: "rgba(151,187,205,strokeColor: "rgba(151,pointColor: "rgba(151,pointHighlightStroke: "rgba(151,10,20,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?"); };
对于那些在这里很难看到图表的人,你去:
希望我提供足够的信息来获得一些帮助.如果我需要自己解释,请让我知道.先谢谢你!!!