热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

如何使用chart.js在点悬停中显示多个值

如何解决《如何使用chart.js在点悬停中显示多个值》经验,为你挑选了1个好方法。

我想知道如果可以在chart.js中显示更多的点悬停值.

看看这个小提琴.这是一个取自chart.js网站的smiple图示例.如果我悬停一个点,它会显示数据集值.

我怎样才能展示其他价值.喜欢这个阵列.

[65, 59, 80, 81, 56, 55, 40]

如果我想显示这个数组值 [1, 2, 3, 4, 5, 6, 7].就像我想要显示编号.这只是一个例子,实际上我想显示更多的两个值,但不想在图表上仅在pointhover中显示它.就像在65上一样,它告诉它是第1个值.

任何形式的帮助将不胜感激.



1> Kuldeep Sing..:

是的,请使用工具提示选项,如下所示

var ctx = document.getElementById('chart1').getContext("2d");
    var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(75,192,192,0.4)",
            borderColor: "rgba(75,192,192,1)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(75,192,192,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
            data: [65, 59, 80, 81, 56, 55, 40],
            spanGaps: false,
        }
    ]
};



var optiOns= {
        responsive: true,
        title: {
            display: true,
            position: "top",
            text: 'anything',
            fontSize: 18,
            fontColor: "#111"
        },
        tooltips: {
                enabled: true,
                mode: 'single',
                callbacks: {
                    label: function(tooltipItems, data) { 
                       var multistringText = [tooltipItems.yLabel];
                           multistringText.push('Another Item');
                           multistringText.push(tooltipItems.index+1);
                           multistringText.push('One more Item');
                        return multistringText;
                    }
                }
            },
        legend: {
            display: true,
            position: "bottom",
            labels: {
                fontColor: "#333",
                fontSize: 16
            }
        },
        scales:{
            yAxes:[{
                ticks:{
                    min:0

                }
            }]

        }
    };
var myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});



推荐阅读
  • 如何在谷歌图表API中添加链接 - How to add links in google chart api
    CanIaddlinksingooglechartapi?我可以在googlechartapi中添加链接吗?Forexample,例如,HowcouldIad ... [详细]
  • 电话号码的字母组合解题思路和代码示例
    本文介绍了力扣题目《电话号码的字母组合》的解题思路和代码示例。通过使用哈希表和递归求解的方法,可以将给定的电话号码转换为对应的字母组合。详细的解题思路和代码示例可以帮助读者更好地理解和实现该题目。 ... [详细]
  • 李逍遥寻找仙药的迷阵之旅
    本文讲述了少年李逍遥为了救治婶婶的病情,前往仙灵岛寻找仙药的故事。他需要穿越一个由M×N个方格组成的迷阵,有些方格内有怪物,有些方格是安全的。李逍遥需要避开有怪物的方格,并经过最少的方格,找到仙药。在寻找的过程中,他还会遇到神秘人物。本文提供了一个迷阵样例及李逍遥找到仙药的路线。 ... [详细]
  • 本文介绍了在处理不规则数据时如何使用Python自动提取文本中的时间日期,包括使用dateutil.parser模块统一日期字符串格式和使用datefinder模块提取日期。同时,还介绍了一段使用正则表达式的代码,可以支持中文日期和一些特殊的时间识别,例如'2012年12月12日'、'3小时前'、'在2012/12/13哈哈'等。 ... [详细]
  • 模板引擎StringTemplate的使用方法和特点
    本文介绍了模板引擎StringTemplate的使用方法和特点,包括强制Model和View的分离、Lazy-Evaluation、Recursive enable等。同时,还介绍了StringTemplate语法中的属性和普通字符的使用方法,并提供了向模板填充属性的示例代码。 ... [详细]
  • STL迭代器的种类及其功能介绍
    本文介绍了标准模板库(STL)定义的五种迭代器的种类和功能。通过图表展示了这几种迭代器之间的关系,并详细描述了各个迭代器的功能和使用方法。其中,输入迭代器用于从容器中读取元素,输出迭代器用于向容器中写入元素,正向迭代器是输入迭代器和输出迭代器的组合。本文的目的是帮助读者更好地理解STL迭代器的使用方法和特点。 ... [详细]
  • MySQL多表数据库操作方法及子查询详解
    本文详细介绍了MySQL数据库的多表操作方法,包括增删改和单表查询,同时还解释了子查询的概念和用法。文章通过示例和步骤说明了如何进行数据的插入、删除和更新操作,以及如何执行单表查询和使用聚合函数进行统计。对于需要对MySQL数据库进行操作的读者来说,本文是一个非常实用的参考资料。 ... [详细]
  • 本文主要介绍了gym102222KVertex Covers(高维前缀和,meet in the middle)相关的知识,包括题意、思路和解题代码。题目给定一张n点m边的图,点带点权,定义点覆盖的权值为点权之积,要求所有点覆盖的权值之和膜qn小于等于36。文章详细介绍了解题思路,通过将图分成两个点数接近的点集L和R,并分别枚举子集S和T,判断S和T能否覆盖所有内部的边。文章还提到了使用位运算加速判断覆盖和推导T'的方法。最后给出了解题的代码。 ... [详细]
  • javascript二叉树基本功能实现
    都是常用的功能。删除是最复杂的。。test ... [详细]
  • keras归一化激活函数dropout
    激活函数:1.softmax函数在多分类中常用的激活函数,是基于逻辑回归的,常用在输出一层,将输出压缩在0~1之间,且保证所有元素和为1,表示输入值属于每个输出值的概率大小2、Si ... [详细]
  • Arduino + ESP32C3 + TFT(1.8‘ ST7735S)基础平台(实验四)直接显示网络图片
    ------------------------------------------------------------------------------------------ ... [详细]
  • jquery定时器调用函数时传参varli$(.firstli:first-child);varindex0;vars$(.firstli);functiongundong(a ... [详细]
  • 篇首语:本文由编程笔记#小编为大家整理,主要介绍了利用AndroidCamera2的照相机api实现实时的图像采集与预览相关的知识,希望对你有一定的参考价值。&n ... [详细]
  • 嵌入式C语言笔记基础
    C语言变量结构体1.结构体进行变量赋值时,数据输入需要使用取地址运算符结构体指针变量,结构体数组#includestructst ... [详细]
  • 如何解决《如何制作这个圆形的双色甜甜圈图表?》经验,为你挑选了1个好方法。 ... [详细]
author-avatar
迷恋当年的超女
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有