草庐IT

折线图绘制

全部标签

javascript - 使用 Highcharts 在 y 轴上绘制秒、分和小时

我有一些看起来像这样的数据:min="00:09"med="03:11"mean="23:39"max="12:40:26"我希望能够将这些值用作数据点,但我不确定如何绘制它们,因为它们不是简单的整数。理想情况下,我希望Y轴上的标签显示“小时”之类的内容,或者如果我要使用多个y轴,那么它可以显示“分钟”值的“秒”,“平均”值的“分钟”值等适应适当的时间窗口。我不确定是否可以使用日期时间对象,因为我只有时间值而没有日期。如有任何想法,我们将不胜感激,并提前致谢。 最佳答案 如果您拥有的时间是静态字符串,您可以将它们转换为日期时间对象.

javascript - 使用 KendoUI 折线图,如何使数据标记(点)成为纯色?

我正在使用KendoUI替换现有图表。我需要尽量减少图表之间的变化。有谁知道如何使折线图上的点变为实线?有没有可能把线做得更细?这是我的图表图片:如果你想玩的话,这是我的jsFiddle项目:http://jsfiddle.net/rodneyhickman/uMTnh/2/我的html看起来像:我的jQuery脚本看起来像:jQuery('#chart').kendoChart({title:{text:"OverallScoreoutof100",align:"left",font:"18pxArial,Verdana,sans-serif",color:"#444"},serie

javascript - 为什么不绘制以编程方式插入的 SVG <tspan> 元素,d3.js 除外?

假设我想以编程方式插入额外的在以下SVG中的元素:onetwothree除其他外,这可以通过纯JavaScript(.appendChild)、jQuery(.append)和d3.js(.append)来完成。然而,尽管这三种方法都成功地插入了元素,但我似乎只能在d3.js插入元素时才能实际显示:请参阅此fiddle中的简化大小写:http://jsfiddle.net/2NLJY/.该行为在我测试过的浏览器中是一致的:Firefox、Chrome和Safari(所有OSX10.8)。这是怎么回事? 最佳答案 您不能使用creat

javascript - 从本地路径加载图像并将其绘制在 Canvas 上

我想在Canvas上绘制图像,其中图像的源将由用户动态设置。我在尝试为图像设置src时遇到以下错误:Notallowedtoloadlocalresource:file:///D:/My%20Picsb.jpg'有没有办法从本地驱动器加载文件以在Canvas上绘制它们?varimg=newImage();img.onload=function(){context.drawImage(img,20,20,50,50);};img.src="D:\MyPics\tb.jpg"; 最佳答案 出于安全原因,您想要的不会起作用。但是,您可以做

javascript - Chart.js 使用日期创建折线图

我似乎无法让Chart.js处理日期。我尝试了很多不同的方法:letexamChart=document.getElementById("examChart").getContext("2d");letexamLineChart=newChart(examChart,{type:"line",data:[{t:newDate("2015-3-1513:3"),y:12},{t:newDate("2015-3-2513:2"),y:21},{t:newDate("2015-4-2514:12"),y:32}],options:{label:"placeholder"}});和:letex

javascript - 通过刷多路径图表无法绘制 d3.js Focus+Context

我已经用了几个星期了,但似乎无法弄清楚如何绘制下面的多路径图表。Focus+ContextviaBrushingchart我试图创建一个jsfiddle,但无法复制我得到的屏幕。在这一点上,我所拥有的与原始图表相似,只是只有一条路径而不是区域,并且刷牙工作正常。基本上尝试结合焦点图和多系列折线图Multiserieschart.但是,当我尝试添加另一条路径时,没有任何效果。请提出我需要做出的任何想法或更改以使其正常工作。还有其他类似的图表(或图表示例)我可以看一下吗?可以以任何方式或形式重新排列数据以使其起作用。Jsfiddlepath{fill:none;stroke:white;s

javascript - Kendo UI line Graph,如何防止标签被绘制到图表之外?

我正在使用KendoUI线图。我在折线图上有标签,标签在顶部被切断。有办法避免这种情况吗?这是一个可以玩的jsFiddle项目:http://jsfiddle.net/rodneyhickman/2eWYg/1/这是我的标记:这是我的脚本:jQuery('#divChart').kendoChart({seriesDefaults:{type:"line",missingValues:"interpolate"},legend:{position:"bottom"},tooltip:{visible:true,format:"{0}%"},valueAxis:{min:70,max:9

javascript - Highcharts - 在鼠标位置绘制十字准线/工具提示而不是捕捉到数据点

Here(seethisjsfiddle)您可以看到二维十字准线正在捕捉到最接近它的数据点。您如何使十字线和工具提示与图表上的当前鼠标位置相对应?tooltip:{crosshairs:[true,true]} 最佳答案 jsFiddleSolution我最终绑定(bind)了自己的mousemove事件,以获得图表中不断变化的鼠标位置以获取十字准线。对于我刚刚使用的工具提示:tooltip:{shared:true,followPointer:true},这应该足以让您继续前进。 关于

javascript - 在 A4 svg 绘图中绘制 1 像素笔画宽度图形

我目前正在尝试用svg画一些图形,纸张尺寸为A4,1个逻辑单元代表1mm。所以我将视口(viewport)设置为297mmx210mm,viewbox为297x210。现在的问题是我画的图stroke-width不再是1个像素。例如,即使我将其stroke-width设置为“1px”,上面的这3行也具有完全相同的线宽。在这种设置下是否仍然可以绘制1像素宽的线? 最佳答案 试试这个:vector-effect="non-scaling-stroke"是SVG1.2Tiny的一项功能,它强制笔划宽度完全符合您的指定,无论缩放或单位转换是

Javascript 将动态图像从 URL 绘制到 Canvas 元素上

我正在尝试使用其URL将动态PNG图像(由PHP脚本生成的图像)​​绘制到Canvas元素上。我无法真正发布我正在测试的页面的确切URL,因为您必须登录该网站。我正在使用的动态图像URL之一的示例是:http://www.website.com/includes/dynamicimage.php?ID=29718958161如果您登录到这个特定网站并将该URL粘贴到您的地址栏中,它会正确显示图像。但是,以下Javascript代码无法将其正确绘制到Canvas元素上:functioncheckImage(imageContext){varcanvas=document.createEl