当使用Chart.js库时,我可以在我的页面上添加多个甜甜圈,而不会有问题。

http://www.chartjs.org/docs/#doughnut-pie-chart

但是我找不到一种总是显示工具提示的方法 – 不仅将鼠标悬停在圆环上。有人知道这是否可行?

解决方法

今天我有同样的问题,通过添加onAnimationComplte和tooltipevents的选项来解决它很容易。

onAnitmationComplete调用方法来显示工具提示,就像hover事件一样。
通常,您可以在tooltipevents中定义事件来显示工具提示,但是我们需要删除它们并传递一个空数组。

注:(http://www.chartjs.org/docs/#doughnut-pie-chart)。

使用Javascript:

var options = 
{
    tooltipTemplate: "<%= value %>",onAnimationComplete: function()
    {
        this.showTooltip(this.segments,true);

        //Show tooltips in bar chart (issue: multiple datasets doesnt work http://jsfiddle.net/5gyfykka/14/)
        //this.showTooltip(this.datasets[0].bars,true);

        //Show tooltips in line chart (issue: multiple datasets doesnt work http://jsfiddle.net/5gyfykka/14/)
        //this.showTooltip(this.datasets[0].points,true);  
    },tooltipEvents: [],showTooltips: true
}

var context = $('#chart').get(0).getContext('2d');
var chart = new Chart(context).Pie(data,options);

HTML:

<div id="chartContainer">
    <canvas id="chart" width="200" height="200"></canvas>
</div>

示例数据:

var data = [
    {
        value: 300,color:"#F7464A",highlight: "#FF5A5E"
    },{
        value: 50,color: "#46BFBD",highlight: "#5AD3D1"
    },{
        value: 100,color: "#fdb45C",highlight: "#FFC870"
    }
]

JSfiddle PIE:
http://jsfiddle.net/5gyfykka/

JSfiddle BAR / LINE:
http://jsfiddle.net/5gyfykka/14/

jquery – Chart.js – 甜甜圈总是显示工具提示?的更多相关文章

  1. 基于HTML5 Canvas的3D动态Chart图表的示例

    这篇文章主要介绍了基于HTML5 Canvas的3D动态Chart图表的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  2. ios – 将PDF文件附加到电子邮件 – Swift

    我想发送带有PDF附件的电子邮件.我创建了PDF文件,然后我做了以下哪些错误我相信:在发送电子邮件之前,我可以看到附带的chart.pdf,但是当我发送电子邮件时,它是在没有附件的情况下发送的,这是因为我没有正确附加文件.解决方法您将错误的mimeType传递给addAttachmentData().使用application/pdf而不是pdf.

  3. mpandroidchart – 条形图中的y值变化动画

    在barChart上调用animateY时,将重绘整个图表,将条形图从y-zero设置为y-new.是否可以将动画限制为值更改.因此,允许用户看到图表如何从y-old增长到y-new?解决方法我遇到了同样的问题,无法找到解决方案.所以,我创建了一个可以调用来处理这种任务的类.你可以像这样调用这个类:

  4. 在MPAndroidChart库中禁用缩放缩放

    我想在MPAndroidChart库的barchart上禁用缩放缩放,我该怎么做.也不行.解决方法试试这个,disableallzooming:更多信息请参阅here

  5. 关于vue-tree-chart简单的使用

    这篇文章主要介绍了关于vue-tree-chart简单的使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  6. .net-4.0 – Microsoft图表堆积柱形图存在差距

    我发现如果你在给定y值为0的值的最后给你的值添加点也不起作用–也就是在我保存图像之前.系列中点的顺序似乎很重要对于StackedColumn,我从来没有使用过这种类型,除了调查如何回答这个问题,这对于这类用户来说可能是常识)“after.png”的图片:那么,鉴于您无法在事后添加零点(尽管您可以插入它们?

  7. 在php mysql中使用Google Chart API显示条形图

    我一直在搜索很多这个.我得到了解决方案.这里是.这是使用AJAX在PHP中完成的.我有2页是googleapi.PHP和其他getData.PHP,由googleapi.PHP发送的AJAX请求使用.googleapi.PHP访问getdata.PHP就是这样,你需要创建一个数据库.它的作用就像一个魅力.我知道你的帖子是一个“答案”,但我认为我会进来的.如果你想要动态地输入数据到Google图表中,你可以使用PHP回调到javascript中.PHP可用于从您的服务器或MysqL表中获取信息.这是一个例子

  8. 使用Ajax将数据加载到Highcharts中

    我试图在页面加载和使用JQUERYAJAX调用选择菜单更改时更新高级图表.在[[10,1228800000],[10,1228800000]]格式中返回数据.该图表为空白,不显示任何数据.试过这里发布的几个解决方案,但都没有奏效.有错误吗?

  9. 【Chart.js】通过Ajax请求JSON数据来绘制图表

    背景在使用Chart.js绘制图表时,我们通常会有这样的需求:从后台方法动态获取图表的数据,而非Demo中使用的静态数据。本文将分享如何使用Ajax动态请求JSON数据并且完成图表的绘制。

  10. Highcharts AJAX JSON JQuery 实现动态数据交互显示图表

    HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。并转为json字符串数组8.3DAO使用的的JDBCTemplate传递sql语句查询。返回list对象以上基本完成了数据的获取和转JSON字符串数组剩下就是在页面接受JSON并填充到highcharts图表里面9.JS代码。使用AJAX传递过来。并填充到highcharts里面即可。怨自己没好好学习jquery。

随机推荐

  1. jquery-plugins – 是否可以使用猫头鹰旋转木马实现循环/无限轮播?

    我正在使用猫头鹰旋转木马,它的工作完美,除了它不支持循环/无限滚动.我没有搜索google和stackoverflow的想法,没有运气.有没有人在猫头鹰旋转木马上实现圆形/无限滚动?

  2. jQuery动态输入字段焦点

    我想使用以下jQuery向我的页面动态添加一个输入字段:在这样做之后,我希望输入字段具有闪烁的文本光标的焦点,所以我想在创建后立即输入.有人可以告诉我我该怎么办?

  3. jquery – 为什么$(window).height()这样错了?

    我试图获取当前浏览器的视口高度,使用但我得到的价值观太低了.当视口高度高达850px时,我从height()获取大约350或400像素的值.这是怎么回事?

  4. jquery – 如果在此div之外和其他draggables内部(使用无效和有效的还原选项),则可拖动恢复

    例如这样但是由于明显的原因,这不行.我可以说这个吗?

  5. 创建一个jQueryUI 1.8按钮菜单

    现在jQueryUI1.8已经出来了,我正在浏览更新,并且遇到了新的Buttonwidget,特别是SplitButtonwithadropdown的演示之一.这个演示似乎表明Buttonwidget可以在这里创建一个下拉菜单.作为讨论的问题,我想知道使用这个新的Button小部件来创建一个下拉菜单有什么方法.干杯.解决方法您必须在按钮下方列出一个列表,方式类似于此处为自动完成提供的演示:http

  6. 灰色divs使用JQuery

    我试图使用这个代码:为了淡出一大堆名为MySelectorDiv的div,唯一的是,它只会淡出第一个而不是所有的div,为什么呢?

  7. 使用jQuery动态插入到列表中

    我有两个订单列表在彼此旁边.当我从一个列表中选出一个节点时,我想按照字母顺序插入到另一个列表中.抓住的是我想要把一个元素放在另一个列表中,而不刷新整个列表.奇怪的是,当我插入到右边的列表中,它工作正常,但是当我插入到左边的列表中时,顺序永远不会出来.我也尝试将所有内容读入数组,并将其排序在一起,以防止children()方法没有按照显示顺序返回任何东西,但是我仍然得到相同的结果.这是我的jQuer

  8. 没有回应MediaWiki API使用jQuery

    我试图从维基百科获取一些内容作为JSON:但我没有回应.如果我粘贴到浏览器的地址栏,就像我得到预期的内容.怎么了?解决方法您需要通过添加&callback=?来触发具有$.getJSON()的JSONP行为?在querystring上,像这样:Youcantestithere.没有使用JSONP,你正在击中same-originpolicy,阻止XmlHttpRequest获取任何数据.

  9. jQuery Ajax请求每30秒

    我有这段代码,但是有些人在我的网站上的值可能会改变.我需要每30秒钟更新一次#financediv.这可以做吗解决方法您可以将代码放在单独的函数中,如下所示:然后每30秒建立一个定时器调用该函数:祝你好运!总结以上是DEVMAX为你收集整理的jQueryAjax请求每30秒全部内容。如果觉得DEVMAX网站内容还不错,欢迎将DEVMAX网站推荐给好友。

  10. jquery – keypress事件在IE和Chrome中不工作,但在FF工作

    任何想法为什么会这样发生?我通常认为Chrome会更加宽容代码?这是我的按键键.我错过了什么吗?右图();和leftimage();是应该工作的功能,因为我在其他地方使用这些功能谢谢您的帮助!

返回
顶部