我的Chart.js自定义交互模式如何使用“最近”功能?

kupeojn6  于 2023-04-06  发布在  Chart.js
关注(0)|答案(1)|浏览(152)

我有一个图表,它在选项中实现了一个名为myCustomMode的自定义交互模式:

interaction: {
 intersect: false,
  mode: 'myCustomMode',
  axis : 'x'
},

然而,现在只有当用户正好在x轴上时,而不是当他们“靠近”时,才会调用事件。如果我将模式更改为最近的模式,我会看到所需的行为,但无法实现我的自定义(更新的注解)。是否有任何方法可以通过某种方式扩展Chart.js的当前函数来拥有自定义模式并拥有最近的模式?
下面是我的自定义模式函数:

Interaction.modes.myCustomMode = function(chart, e, options, useFinalPosition) {
  const position = getRelativePosition(e, chart);
  console.log("X:"+position.x);
  
  const items = [];
  Interaction.evaluateInteractionItems(chart, 'x', position, (element, datasetIndex, index) => {
    
    if (element.inXRange(position.x, useFinalPosition) && index_tracker!=index) {
        
        index_tracker=index;
        /*const activePoints = chart.getElementsAtEventForMode(ev,, 'nearest', { intersect: true }, true);
        const firstPoint = activePoints[0];
        const datasetIndex = firstPoint.datasetIndex;
        index = firstPoint.index;*/
        
        items.push({element, datasetIndex, index});
        const xLabel = chart.data.labels[index];
        const yValue1 = chart.data.datasets[0].data[index];
        const yValue2 = chart.data.datasets[1].data[index];
        chart.options.plugins.annotation.annotations[0].xMin = index-0.5;
        chart.options.plugins.annotation.annotations[0].xMax = index+0.5;
        chart.options.plugins.annotation.annotations[1].label.content = [xLabel+' : Stay home','USD '+yValue1.toLocaleString()];
        chart.options.plugins.annotation.annotations[2].label.content = [xLabel+' : Go study','USD '+yValue2.toLocaleString()];
        /* This code ensures the point hover only changes with the annotation code, but they we lose the 
        really cool 'nearest' mode of interaction which I cant replicate in this function. We can either:
        -- leave as and get cool interaction but values only update when exactly on new X point OR
        -- uncomment code below to only update point hover when exactly on X point (uncool and get 2 points instead of 1 sometimes) OR
        -- uncomment code below and move mode:"myCustomMode" from ToolTip to Interaction in options to have most uncool verison
        -- Finally (preferred) we could try to implement 'nearest' functionality here by somehow extending their mode but can't figure this out?
        
        //Change hover points - sure a better way to do this
        chart.data.datasets[0].pointRadius = [0,0,0,0,0,0,0,0,0,0,0];
        chart.data.datasets[0].pointBorderWidth = [0,0,0,0,0,0,0,0,0,0,0];
        chart.data.datasets[0]['pointRadius'][index] = 6;
        chart.data.datasets[0]['pointBorderWidth'][index] = 5;
        
        chart.data.datasets[1].pointRadius = [0,0,0,0,0,0,0,0,0,0,0];
        chart.data.datasets[1].pointBorderWidth = [0,0,0,0,0,0,0,0,0,0,0];
        chart.data.datasets[1]['pointRadius'][index] = 6;
        chart.data.datasets[1]['pointBorderWidth'][index] = 5;
        */
        chart.update();    
    }
  });
  return items;
};

先谢了

fcipmucu

fcipmucu1#

我不太理解这个用例,但我认为它可能是这样的:

Interaction.modes.myCustomMode = function(chart, e, options, useFinalPosition) {
  const nearestItems = Interaction.modes.nearest(chart, e, {axis: 'x', intersect: false}, useFinalPosition);
  
  const items = [];
  for (const element of nearestItems) {
      const index = element.index;
    if (index_tracker != index) {
        index_tracker = index;
        items.push(element);
        const xLabel = chart.data.labels[index];
        const yValue1 = chart.data.datasets[0].data[index];
        const yValue2 = chart.data.datasets[1].data[index];
        chart.options.plugins.annotation.annotations.box.xMin = index - 0.5;
        chart.options.plugins.annotation.annotations.box.xMax = index + 0.5;
        chart.update();    
    }
  };
  return items;
};

代码编号:https://codepen.io/stockinail/pen/yLRBQwK

相关问题