草庐IT

d3_graph_chart

全部标签

javascript - 使 chart.js 中的 X 轴标签按一定比例递增

我的标签范围为50-90,并且显示了介于两者之间的每个数字。我想按5或10列出标签,因为目前它们都被压缩在一起。它也使y轴的左侧部分被chop。 最佳答案 编辑2:好的,所以我实际上在我正在从事的项目中需要这样的功能,所以我制作了一个自定义构建的chart.js以包含此功能。http://jsfiddle.net/leighking2/mea767ss/或https://github.com/leighquince/Chart.js它是以下两种解决方案的组合,但与CHart.js的核心相关联,因此无需指定自定义比例和图表。折线图和条

javascript - 在 v2 上的 chart.js 中的图表上绘制水平线

我使用chart.js绘制了折线图。对于标签和数据集,我从数据库中获取值。我是chart.js及其非常强大的库的新手,但我无法完全理解它。我想画多条水平线。就像数据集的平均值、标准差以及最小值和最大值在哪里。我已经在stackoverflow中尝试过这个问题,但这些都给出了错误,或者可能是我无法理解工作原理。这是我的chart.js代码functiondisplay_graph(id,label,data){varctx=document.getElementById(id);vardata={labels:data.labels,datasets:[{label:label,fill

javascript - Google Charts - 工具提示中的完整 html

我正在尝试让GoogleCharts显示带有完整HTML的自定义工具提示。我知道如何启用工具提示并传递适当的数据-问题是-即使启用allowHTML选项,工具提示也会呈现为纯文本,例如我无法显示图片在工具提示中。这里是我要做什么的一个小例子:我现在拥有的是:我想要的:解决此问题的一种方法是禁用工具提示,捕获onmouseover事件并使用另一个库(如cluetip)在光标处显示工具提示,但我想知道是否有更简洁、native的方法来启用这种功能谷歌图表。另请查看我关于图像作为谷歌图表中的点标记的其他问题。编辑:与此同时,我找到了一个涵盖此功能的非常好且相当便宜(每个网站许可证60美元)的

javascript - 如何将多个外部监听器注册到 d3 中的同一选择?

我正在用d3编写一个项目,其中有一个包含两个外部javascript文件的html页面,例如script_1.js和script_2.js。我需要从script_1.js注册一个事件监听器,从script_2.js注册另一个事件监听器以用于选择元素上的更改事件。目前我的html中有这一行:其中selectIndexSp(object)和selectIndexBt(object)分别定义在script_1.js和script_2.js中。我根本不喜欢这种方法,我想知道如何在d3中而不是在html文件中执行相同的任务,我知道这不是一个好的做法。提前致谢! 最佳答

javascript - d3.js 在鼠标悬停时更改折线图点的颜色和大小

我用d3.js制作了一个折线图(见附图1)。我设法在鼠标悬停时在图形点上插入工具提示。我也想改变点的颜色和大小。我尝试了很多方法,但似乎真的很难。有什么帮助吗?这是一段代码:svg.selectAll("dot").data(data).enter().append("circle").attr("r",5.5).style("fill","#fff8ee").style("opacity",.8)//settheelementopacity.style("stroke","#f93")//setthelinecolour.style("stroke-width",3.5).attr(

javascript - Chart.js - 样式图例

我正在使用chart.js制作图表,我正在尝试弄清楚如何更改标签/图例样式。我想删除矩形部分,而是使用一个圆圈。我读过你可以制作你的自定义图例(使用legendCallback),但对于我来说,我无法弄清楚如何去做。这就是我的图表现在的样子-image.这是我的HTML:这是我的JS:varctx=document.getElementById("myChart");varmyChart=newChart(ctx,{type:'line',data:{labels:["Red","Blue","Yellow","Green","Purple","Orange"],datasets:[{

javascript - d3.js 可以使用来自同一来源的数据在同一张图上绘制两个散点图吗?

我发现的所有d3教程都使用排列在对象数组中的数据,他们从中为数组中的每个对象绘制一个点。给定以下结构的数据:data=[{id:1,x:4,y:10,type:1},{id:2,x:5,y:20,type:2}...]x和y值用于制作散点图。类型参数用于改变每个点的颜色。有关示例,请参见此jsfiddle:http://jsfiddle.net/uxbHv/不幸的是,我有一个不同的数据结构,我不知道如何通过为每个对象绘制两个数据点来创建相同的图形。以下是一些示例数据:dataSet=[{xVar:5,yVar1:90,yVar2:22},{xVar:25,yVar1:30,yVar2:

javascript - 使文本适合 SVG 元素(使用 D3/JS)

我想在我创建的矩形内写入文本,如下所示:body=d3.select('body')svg=body.append('svg').attr('height',600).attr('width',200)rect=svg.append('rect').transition().duration(500).attr('width',150).attr('height',100).attr('x',40).attr('y',100).style('fill','white').attr('stroke','black')text=svg.append('text').text('Thisis

javascript - D3.js 动画旋转

当我尝试使用D3.js库正确执行旋转动画时遇到问题。问题与我想要旋转元素的点有关。这是我制作的fiddle来展示我的意思(慢动作):http://jsfiddle.net/74mCb/问题的根源似乎在这里:.attr("transform","rotate(-60,150,130)");然后我像这样旋转它:.attr("transform","rotate(40150,130)");我希望针头保持在原位(成为旋转中心),有人可以解释一下我做错了什么吗?谢谢! 最佳答案 这有点难以掌握(我自己并不完全理解)但是D3需要一些帮助来了解如

javascript - d3.js 图中圆圈的随机颜色

这是jsfiddle的链接http://jsfiddle.net/jaimem/RPGPL/2/现在图形中所有的圆圈都显示为红色。是否有一种方法可以在圆圈上显示随机颜色。这是d3.js代码vardata=[{"count":"202","year":"1590"},{"count":"215","year":"1592"},{"count":"179","year":"1593"},{"count":"199","year":"1594"},{"count":"134","year":"1595"},{"count":"176","year":"1596"},{"count":"172