使用Chart.JS显示单个工具提示?

达伦

我使用Chart.JS制作了图表,希望将工具提示显示限制为1个单点。我有一个工作演示,当前正在显示所有工具提示,可在此处查看:https : //jsfiddle.net/p2yd6hut/

var data1 = {
  labels : ["SUN","MON","TUE","WED","THU","FRI","SAT"],
  datasets : [
{
  fillColor : "rgba(255,255,255,.1)",
  strokeColor : "rgba(0,0,0,.25)",
  pointColor : "#0af",
  pointStrokeColor : "rgba(255,255,255,1)",
  pointHighlightFill : "#fff",
  pointHighlightStroke : "rgba(220,220,220,1)",
  data : [150,200,235,390,290,250,250]
    }
 ]
}

var options1 = {
  scaleFontColor : "rgba(0,0,0,1)",
  scaleLineColor : "rgba(0,0,0,.1)",
  scaleGridLineColor : "rgba(0,0,0,.1)",
  scaleShowGridLines : true,
  scaleShowLabels : false,
  scaleShowHorizontalLines : false,
  bezierCurve : false,
  scaleOverride : true,
  scaleSteps : 5,
  scaleStepWidth : 100,

  tooltipTemplate: "<%= value %>" + "Guests",
  showTooltips: true,
  tooltipFillColor: "#0af",  
  onAnimationComplete: function() {    
  this.showTooltip(this.datasets[0].points, true);          
    },
  tooltipEvents: []

}

new Chart(c1.getContext("2d")).Line(data1,options1);

是否只能为所选数据点显示工具提示?例如,我只希望有星期三,数组中的数据是390。

所需功能的屏幕快照:http : //i.imgur.com/VdH4atw.png

忠告不胜感激,谢谢!

费尔明·珀多莫

这是onAnimationComplete函数上的解决方案https://jsfiddle.net/p2yd6hut/2/我已经创建了一个新的临时数组,其值> =到390

onAnimationComplete: function()
    {    var tempArr = [];
     this.datasets[0].points.forEach(function(point){
         if(point.value >= 390){
             tempArr.push(point);
         }
     });
        this.showTooltip(tempArr, true);          
    }

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用“ onmouseover”在JavaScript中显示工具提示

来自分类Dev

如何在Chart.js中显示工具提示?

来自分类Dev

Chart.js工具提示未显示

来自分类Dev

如何使用d3.js在饼图附近显示工具提示?

来自分类Dev

JavaScript Chart.js-自定义数据格式以显示在工具提示上

来自分类Dev

Chart.js在页面加载时显示工具提示

来自分类Dev

使用Chart.js缺少某些数据点的工具提示

来自分类Dev

Chart.js:更改工具提示模板

来自分类Dev

使用HTML帮助器显示工具提示

来自分类Dev

使用Chart.JS显示单个工具提示?

来自分类Dev

Chart.js v2:如何使工具提示始终显示在饼图中?

来自分类Dev

使用Clipboard.js的工具提示+突出显示动画单击

来自分类Dev

允许在Chart.js的工具提示中显示多个数据属性

来自分类Dev

使用JavaScript显示工具提示

来自分类Dev

d3.js:如何使用父节点中的数据?(以在单个条形工具提示中显示分组的条形名称)

来自分类Dev

对于在chart.js中数据相互重叠的那些标签,工具提示不显示

来自分类Dev

当光标位置错误时,将显示Chart.js鼠标悬停工具提示

来自分类Dev

Chart.js-使用工具提示绘制任意点

来自分类Dev

如何使用jQuery显示工具提示

来自分类Dev

使用“ onmouseover”在JavaScript中显示工具提示

来自分类Dev

Chart.js:着色工具提示标签

来自分类Dev

Chart.js在页面加载时显示工具提示

来自分类Dev

使用Chart.js缺少某些数据点的工具提示

来自分类Dev

Chart.js 2.0 - 工具提示在悬停时显示不完整的数据

来自分类Dev

使用 Chart.js 更改圆环图中的工具提示位置

来自分类Dev

在 Chart.js v2 圆环图工具提示中显示所有值

来自分类Dev

Chart.js - 甜甜圈显示活动段工具提示(点击外部按钮)

来自分类Dev

ChartJS:使用 Total for Multi Pie chart 显示所有工具提示

来自分类Dev

无法使用 chart.js 查看工具提示数据

Related 相关文章

  1. 1

    使用“ onmouseover”在JavaScript中显示工具提示

  2. 2

    如何在Chart.js中显示工具提示?

  3. 3

    Chart.js工具提示未显示

  4. 4

    如何使用d3.js在饼图附近显示工具提示?

  5. 5

    JavaScript Chart.js-自定义数据格式以显示在工具提示上

  6. 6

    Chart.js在页面加载时显示工具提示

  7. 7

    使用Chart.js缺少某些数据点的工具提示

  8. 8

    Chart.js:更改工具提示模板

  9. 9

    使用HTML帮助器显示工具提示

  10. 10

    使用Chart.JS显示单个工具提示?

  11. 11

    Chart.js v2:如何使工具提示始终显示在饼图中?

  12. 12

    使用Clipboard.js的工具提示+突出显示动画单击

  13. 13

    允许在Chart.js的工具提示中显示多个数据属性

  14. 14

    使用JavaScript显示工具提示

  15. 15

    d3.js:如何使用父节点中的数据?(以在单个条形工具提示中显示分组的条形名称)

  16. 16

    对于在chart.js中数据相互重叠的那些标签,工具提示不显示

  17. 17

    当光标位置错误时,将显示Chart.js鼠标悬停工具提示

  18. 18

    Chart.js-使用工具提示绘制任意点

  19. 19

    如何使用jQuery显示工具提示

  20. 20

    使用“ onmouseover”在JavaScript中显示工具提示

  21. 21

    Chart.js:着色工具提示标签

  22. 22

    Chart.js在页面加载时显示工具提示

  23. 23

    使用Chart.js缺少某些数据点的工具提示

  24. 24

    Chart.js 2.0 - 工具提示在悬停时显示不完整的数据

  25. 25

    使用 Chart.js 更改圆环图中的工具提示位置

  26. 26

    在 Chart.js v2 圆环图工具提示中显示所有值

  27. 27

    Chart.js - 甜甜圈显示活动段工具提示(点击外部按钮)

  28. 28

    ChartJS:使用 Total for Multi Pie chart 显示所有工具提示

  29. 29

    无法使用 chart.js 查看工具提示数据

热门标签

归档