Fatal编程技术网
  • charts/
  • Charts Chart.js使用条形图单击标签

Charts Chart.js使用条形图单击标签

charts chart.js

Charts Chart.js使用条形图单击标签,charts,chart.js,Charts,Chart.js,我需要有关Chart.js交互性的帮助。当我点击标签时，我需要返回我点击的列（索引）编号 我尝试使用getElementsAtEvent，但只有在直接单击图表时它才起作用 这正是我想要的，但是getPointsAtEvent在新版本中不再可用 canvas.onclick = function (evt) { var points = chart.getPointsAtEvent(evt); alert(chart.datasets[0].points.indexOf(points[0]));

我需要有关Chart.js交互性的帮助。当我点击标签时，我需要返回我点击的列（索引）编号

我尝试使用getElementsAtEvent，但只有在直接单击图表时它才起作用

这正是我想要的，但是getPointsAtEvent在新版本中不再可用

canvas.onclick = function (evt) {
var points = chart.getPointsAtEvent(evt);
alert(chart.datasets[0].points.indexOf(points[0]));
};
我也发现了这个，但它不适用于条形图

var ctx = document.getElementById("myChart").getContext("2d");
    var myRadarChart = new Chart(ctx, {
        type: 'radar',
        data: data
    })

    $('#myChart').click(function (e) {
        var helpers = Chart.helpers;

        var eventPosition = helpers.getRelativePosition(e, myRadarChart.chart);
        var mouseX = eventPosition.x;
        var mouseY = eventPosition.y;

        var activePoints = [];
        helpers.each(myRadarChart.scale.ticks, function (label, index) {
            for (var i = this.getValueCount() - 1; i >= 0; i--) {
                var pointLabelPosition = this.getPointPosition(i, this.getDistanceFromCenterForValue(this.options.reverse ? this.min : this.max) + 5);

                var pointLabelFontSize = helpers.getValueOrDefault(this.options.pointLabels.fontSize, Chart.defaults.global.defaultFontSize);
                var pointLabeFontStyle = helpers.getValueOrDefault(this.options.pointLabels.fontStyle, Chart.defaults.global.defaultFontStyle);
                var pointLabeFontFamily = helpers.getValueOrDefault(this.options.pointLabels.fontFamily, Chart.defaults.global.defaultFontFamily);
                var pointLabeFont = helpers.fontString(pointLabelFontSize, pointLabeFontStyle, pointLabeFontFamily);
                ctx.font = pointLabeFont;

                var labelsCount = this.pointLabels.length,
                    halfLabelsCount = this.pointLabels.length / 2,
                    quarterLabelsCount = halfLabelsCount / 2,
                    upperHalf = (i < quarterLabelsCount || i > labelsCount - quarterLabelsCount),
                    exactQuarter = (i === quarterLabelsCount || i === labelsCount - quarterLabelsCount);
                var width = ctx.measureText(this.pointLabels[i]).width;
                var height = pointLabelFontSize;

                var x, y;

                if (i === 0 || i === halfLabelsCount)
                    x = pointLabelPosition.x - width / 2;
                else if (i < halfLabelsCount)
                    x = pointLabelPosition.x;
                else
                    x = pointLabelPosition.x - width;

                if (exactQuarter)
                    y = pointLabelPosition.y - height / 2;
                else if (upperHalf)
                    y = pointLabelPosition.y - height;
                else
                    y = pointLabelPosition.y

                if ((mouseY >= y && mouseY <= y + height) && (mouseX >= x && mouseX <= x + width))
                    activePoints.push({ index: i, label: this.pointLabels[i] });
            }
        }, myRadarChart.scale);

        var firstPoint = activePoints[0];
        if (firstPoint !== undefined) {
            alert(firstPoint.index + ': ' + firstPoint.label);
        }
    });

var ctx=document.getElementById（“myChart”）.getContext（“2d”）；
var myRadarChart=新图表（ctx{
类型：“雷达”，
数据：数据
})
$（“#我的图表”）。单击（函数（e）{
var helpers=Chart.helpers；
var eventPosition=helpers.getRelativePosition（e，myRadarChart.chart）；
var mouseX=eventPosition.x；
var mouseY=eventPosition.y；
var-activePoints=[]；
助手。每个（myRadarChart.scale.ticks、函数（标签、索引）{
对于（var i=this.getValueCount（）-1；i>=0；i--）{
var pointLabelPosition=this.getPointPosition（i，this.getDistanceFromCenterForValue（this.options.reverse？this.min:this.max）+5）；
var pointLabelFontSize=helpers.getValueOrDefault（this.options.pointLabels.fontSize，Chart.defaults.global.defaultFontSize）；
var pointLabeFontStyle=helpers.getValueOrDefault（this.options.pointLabels.fontStyle，Chart.defaults.global.defaultFontStyle）；
var pointLabeFontFamily=helpers.getValueOrDefault（this.options.pointLabels.fontFamily，Chart.defaults.global.defaultFontFamily）；
var pointLabeFont=helpers.fontString（pointLabelFontSize、pointLabeFontStyle、pointLabeFontFamily）；
ctx.font=pointLabeFont；
var labelscont=this.pointLabels.length，
halfLabelsCount=this.pointLabels.length/2，
四分之一标签计数=半标签计数/2，
上半部分=（iLabelCount-quarterLabelCount），
exactQuarter=（i==四分之一labelsCount | | i==labelsCount-四分之一labelsCount）；
var width=ctx.measureText（this.pointLabels[i]）.width；
变量高度=pointLabelFontSize；
变量x，y；
if（i==0 | | i==half标签计数）
x=点标签位置。x-宽度/2；
else if（i<半标签计数）
x=点标签位置.x；
其他的
x=点标签位置。x-宽度；
如果（四分之一）
y=点标签位置。y-高度/2；
else if（上半部分）
y=点标签位置。y-高度；
其他的
y=点标签位置。y

如果（（mouseY>=y&&mouseY=x&&mouseX我用


document.getElementById("chart").onclick = function(e) 
{
    var activeElement = weatherMainChart.lastTooltipActive;
    console.log(activeElement[0]._index);
};


这个解决方案注册在图表和标签上的点击，然后我用e.layerY限制它只注册在标签部分的点击


document.getElementById("chart").onclick = function(e) 
{
    var activeElement = weatherMainChart.lastTooltipActive;
    if(e.layerY > 843 && e.layerY < 866 && activeElement[0] !== undefined)
        console.log(activeElement[0]._index);
};



document.getElementById（“图表”）.onclick=function（e）
{
var activeElement=weatherMainChart.lastToolTiactive；
如果（e.layerY>843&&e.layerY<866&&activeElement[0]！==未定义）
log（activeElement[0]。\u索引）；
};

使用2.4.0版，我创建了一个onClick事件，并在其中



var-activeIndex=localChart.tooltip.\u lastActive[0]。\u index；
var clickCoordinates=Chart.helpers.getRelativePosition（e，localChart.Chart）；
如果（clickCoordinates.y>=530）{//自定义值，取决于图表样式、大小等
警报（“单击”+localChart.data.labels[activeIndex]）；

}
如果通过onClick选项添加单击处理程序，则可以使用getElementsAtEventForMode（）调用使用以下代码：


您可能需要为其他图表类型添加额外的开关检查，但我相信您已经明白了。
请详细说明，
530
值到底是什么？一段时间过去了，所以请接受一点模糊。由于Nivelety的类似解决方案，检测标签值的最接近方法是通过单击坐标传递，relat我对图表大小进行了调整。在我的例子中，我激活了工具提示，因此我使用了_lastactive值来获取该列索引。然后我选择了单击坐标，如果y大于530（唉，在具有固定尺寸的图表的下部）我选择了正确的索引处的标签。正如我在评论中所写的，这取决于图表样式、大小等；如果大小可变……我担心这会更难。我希望这会有所帮助。
843
和
866
是什么值？我猜是上下（Y）的值bart图表标签的界限？你能详细说明一下吗？是的，它们正是你所说的。阅读此图并与图表交互有助于我得到我想要的工作，如果你需要更多的了解，它来自此线程

I Solved this problem with single or multiple label click you will be find using true/false

First you need to set your chartJs Id click 

below code SessionChart = Your ChartJs ID e.g. ("myChart") I was replace it for my Id

document.getElementById("SessionChart").onclick = function (evt) {
var meta = SubscriberSessionChart.getDatasetMeta(0);
  if (meta.$filler.chart.legend.legendItems[0].text.toLowerCase() "sessions") 
  {
      if (meta.$filler.chart.legend.legendItems[0].hidden) {
             sessionHidden = true;
      }
   }
}

here "sessions" = first label text

meta.$filler.chart.legend.legendItems[0].text.toLowerCase() = is your first label 
from Array so you can get multiple label's click here true / false

if (meta.$filler.chart.legend.legendItems[0].hidden) = your label is not active then 
you will get hidden true otherwise you will get false if not tick on label 
by default label tick hidden is false in chart js



I Solved this problem with single or multiple label click you will be find using true/false

First you need to set your chartJs Id click 

below code SessionChart = Your ChartJs ID e.g. ("myChart") I was replace it for my Id

document.getElementById("SessionChart").onclick = function (evt) {
var meta = SubscriberSessionChart.getDatasetMeta(0);
  if (meta.$filler.chart.legend.legendItems[0].text.toLowerCase() "sessions") 
  {
      if (meta.$filler.chart.legend.legendItems[0].hidden) {
             sessionHidden = true;
      }
   }
}

here "sessions" = first label text

meta.$filler.chart.legend.legendItems[0].text.toLowerCase() = is your first label 
from Array so you can get multiple label's click here true / false

if (meta.$filler.chart.legend.legendItems[0].hidden) = your label is not active then 
you will get hidden true otherwise you will get false if not tick on label 
by default label tick hidden is false in chart js