开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在c3.js生成的图表中添加图片

问如何在c3.js生成的图表中添加图片
EN

Stack Overflow用户

提问于 2016-09-29 11:09:56

回答 1查看 365关注 0票数 1

我试图将图像添加到图表中-例如旋转的条形图。目的是在视觉上为该系列设定一个目标，就像一面旗帜。

在创建图表之后，我可以将图像添加为SVG元素：

var chart = c3.generate('#foo', _chartOptions));

// put goal
var svg = d3.select($('#foo svg')[0]);
var imgs = svg.selectAll("image").data([0]);
imgs.enter()
.append("svg:image")
.attr("xlink:href", "img/flag1.png")
.attr("x", "60")
.attr("y", "0")
.attr("width", "20")
.attr("height", "20");

但这并不是我想要的效果，因为“flag”必须链接到序列中的某个特定值。如何找到某个值在轴中的位置？有没有办法找到变换矩阵或者别的什么。或者，有没有我可以使用的内部函数？

EN

回答 1

Stack Overflow用户

发布于 2017-02-08 06:10:31

通过使用elements父类来尝试此操作。

 var stopUpper = d3.select('.upperStop'); 
    stopUpper.append('image')
      .attr("xlink:href", "ExtGWT/images/default/shared/stop_32.png")
      .attr("x",10)
      .attr("y", (US-10))
      .attr("width", 20)
      .attr("height", 20);

票数 0

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39768640

复制

相关文章

如何在WordPress中添加图片放大预览效果

玩转wordpress

这里分享一个如何在Wordpress中开启点击图片预览的功能。操作也非常的简单，只需要把下面的内容黏贴到对应的文件中即可。实际的效果预览

兔云小新LM

2023/09/11

4460

如何在WordPress中添加图片放大预览效果

如何在README.md文件中添加图片

1、在github上的仓库建立一个存放图片的文件夹，文件夹名字随意。如：img-folder

挥刀北上

2021/03/10

6.2K0

如何在README.md文件中添加图片

如何在图片上添加文本信息

opencv https 官方文档 html 网络安全

给图片添加文本信息是非常常见的需求，通常需要添加的文本信息分为中文文字或者是非中文的文字，比如数字和英文，对这两类的实现方法也有所不同，非中文的文本信息可以直接用 opencv 实现，而中文文本需要使用 PIL ，因为 opencv 不支持中文。

kbsc13

2020/06/03

2K0

新增章节——Ionic 2 中添加图表

Ionic 2 实例开发今日更新新增章节——Ionic 2 中添加图表： Chart.js是一个在HTML5的<canvas>元素中绘制图标的JavaScript库，非常适合于HTML5的移动应用

孙亖

2018/06/07

2K0

带字图片有什么作用？如何在图片里添加文字？

文字与图片，这二者之间具有相关联系，有很多图片上面都带有文字，这样能够起到丰富图片内容的作用，并且还能够提高图片的整体美感与和谐度。带字图片有哪些作用？怎样在图片上面添加文字？大家一起来看看详细内容吧！

用户8739990

2021/07/16

2.9K0

带字图片有什么作用？如何在图片里添加文字？

Itunes Connect 如添加图片（图像不能包含alpha通道或者透明度）

Itunes Connect 添加图片的时候，提示我们: "图像不能包含alpha通道或者透明度"

GuangdongQi

2018/09/13

1K0

如何在 iOS 的源码中包含图片？

开源编程算法

通过添加这个开源库，笔者 80% 的调试工作都可以用这个库完成，而无需 Xcode 工具。

酷酷的哀殿

2020/10/26

1.5K0

如何在 iOS 的源码中包含图片？

python使用PIL给图片添加文字生成海报

那时的我，对于未来有很多遐想：写小说、写时评、写诗歌... 总而言之，就是成为一个文字工作者

章鱼喵

2018/08/22

3.2K0

python使用PIL给图片添加文字生成海报

如何在系统中添加字体(添加字体到系统)

java https 网络安全

笔者最近在使用win10自带的OneNote笔记本记笔记的时候，发现笔者电脑中没有华文新魏这个字体，最开始以为是OneNote不带有这个字体，经过一段时间的收集资料后发现，是笔者电脑win10系统中不带有这个字体，现将有关概念和字体安装方法做一下记录。

全栈程序员站长

2022/08/01

4.1K0

如何在系统中添加字体(添加字体到系统)

winfrom如何在listview中添加控件

private Button btn = new Button(); private void Form1_Load(object sender, EventArgs e) { ListViewItem[] lvs = new ListViewItem[3]; lvs[0] = new ListViewItem(new string[] { "行1列1", "行1列2", "" }); l

码农阿宇

2018/04/18

2.7K0

如何在Hue中添加Spark Notebook

spark git http hive hbase

CDH集群中可以使用Hue访问Hive、Impala、HBase、Solr等，在Hue3.8版本后也提供了Notebook组件（支持R、Scala及python语言），但在CDH中Hue默认是没有启用Spark的Notebook，使用Notebook运行Spark代码则依赖Livy服务。在前面Fayson也介绍了《Livy，基于Apache Spark的开源REST服务，加入Cloudera Labs》、《如何编译Livy并在非Kerberos环境的CDH集群中安装》、《如何通过Livy的RESTful API接口向非Kerberos环境的CDH集群提交作业》、《如何在Kerberos环境的CDH集群部署Livy》、《如何通过Livy的RESTful API接口向Kerberos环境的CDH集群提交作业》、《如何打包Livy和Zeppelin的Parcel包》和《如何在CM中使用Parcel包部署Livy及验证》，本篇文章Fayson主要介绍如何在Hue中添加Notebook组件并集成Spark。

Fayson

2018/11/16

6.9K1

如何在小程序中绘制图表？

小程序微信 api

文 | musiq1989 由于微信小程序本身框架的限制，很难集成目前已有的图表工具，显示图表目前有两种方案：服务器端渲染图表，输出图片，微信小程序中直接显示渲染好的图片；利用微信小程序 API 中提供的 canvas 组件支持，自行绘制图表。前一种方案已经有非常多类似服务可选，比如 Highcharts 提供了服务端渲染的能力。但这种方式需要后台有一套渲染服务，并且有一定的网络开销。那么，如何利用 canvas 组件，在小程序中绘制图表呢？下面，我们就来看尝试一下。 API 首先，我们在模板文件中

知晓君

2018/06/28

1.4K0

前端开发者常用的9个JavaScript图表库

数据可视化 javascript

当前，数据可视化已经成为数据科学领域非常重要的一部分。不同网络系统中产生的数据，都需要经过适当的可视化处理，以便更好的呈现给用户读取和分析。对任何一个组织来说，如果能够充分的获取数据、可视化数据和分析数据，那么就能很大程度上帮助了解数据产生的深层次原因，以便据此做出正确的决定。对于前端开发人员来说，如果能够掌握交互式网页中的数据可视化技术，则是一项很棒的技能。当然，通过一些 JavaScript 的图表库也会使前端的数据可视化变得更加容易。使用这些库，开发者可以在无需考虑不同的语法所带来的编程难题的情况

葡萄城控件

2018/03/27

7.4K0

前端开发者常用的9个JavaScript图表库

如何在Eclipse中添加Tomcat的jar包

eclipse tomcat java

右键项目工程，点击Java Build Path 点击Add Library，选择Server Runtime 选择Tomcat版本此时就看到拥有了Tomcat的jar包了

用户1154259

2018/01/17

2.9K0

如何在Eclipse中添加Tomcat的jar包

前端开发者常用的 9个JavaScript 图表库

英文： Anton Shaleynikov 译文：葡萄城控件 www.cnblogs.com/powertoolsteam/p/top-9-javascript-charting-libraries.html 当前，数据可视化已经成为数据科学领域非常重要的一部分。不同网络系统中产生的数据，都需要经过适当的可视化处理，以便更好的呈现给用户读取和分析。对任何一个组织来说，如果能够充分的获取数据、可视化数据和分析数据，那么就能很大程度上帮助了解数据产生的深层次原因，以便据此做出正确的决定。对于前端开发人员

企鹅号小编

2018/02/01

8.5K0

前端开发者常用的 9个JavaScript 图表库

前端开发者常用的9个JavaScript图表库

java 数据可视化

当前，数据可视化已经成为数据科学领域非常重要的一部分。不同网络系统中产生的数据，都需要经过适当的可视化处理，以便更好的呈现给用户读取和分析。对任何一个组织来说，如果能够充分的获取数据、可视化数据和分析数据，那么就能很大程度上帮助了解数据产生的深层次原因，以便据此做出正确的决定。对于前端开发人员来说，如果能够掌握交互式网页中的数据可视化技术，则是一项很棒的技能。当然，通过一些 JavaScript 的图表库也会使前端的数据可视化变得更加容易。使用这些库，开发者可以在无需考虑不同的语法所带来的编程难题的情况

葡萄城控件

2018/06/21

7.2K0

PHP中给图片添加水印

有些站点也许是出于推广或者防盗的目的在上传图片时给图片加上一个 LOGO 水印，我就见过有些站长直接用图片工具添加水印然后再上传，当然这样也能实现效果。但 PHP 中也可以完成给图片加水印的功能。就 PHP 函数功能这里就不再去浪费口舌介绍了，直接说下如何实现。大体有以下步骤一、准备好 LOGO 图这个 LOGO 图不限格式，gif 或 png 或 jpg 都可以，大小调成合适的即可。透明度不需要，因为我们可以在 PHP 中灵活设置透明度。如果不会使用制图工具制作 LOGO 可以去谷歌一下在线 LOGO

沈唁

2018/05/24

2K0

使用ichartjs生成图表

官网：http://www.ichartjs.com/ 　　ichartjs 是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。 ichartjs致力于为您的应用提供简单、直观、可交互的体验级图表组件。是WEB/APP图表展示方面的解决方案。如果你正在开发HTML5的应用，ichartjs正好适合您。 ichartjs目前支持饼图、环形图、折线图、面积图、柱形图、条形图。ichartjs是基于Apache License 2.0协议的开源项目。

二十三年蝉

2018/03/01

1.8K0

如何在 JS 中的数组开头添加元素?

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

前端小智@大迁世界

2021/03/02

9.9K0

点击加载更多

相似问题

C3.js -在Timeseries图表中添加右填充

12

向c3.js图表添加水印

20

c3.js生成图表后改变颜色模式

24

向C3.js图表图例添加标题

13

如何在服务器端使用d3库(如c3.js)在nodejs中生成图表？

11

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例