草庐IT

折线图绘制

全部标签

javascript - 多行 Google 折线图的工具提示

我想知道是否有人知道如何使用DataTable、a​​ddColumn和addRow向Google折线图的多行数据添加工具提示?我已经看到它是使用其他方法完成的,但这在我的项目中非常困难,我觉得自己很笨,因为我没有弄清楚这一点。无论如何,我简化了我的代码以展示我的问题的本质。如您所见,第2行显示工具提示,但第1行不显示。我的问题是:如何使用此方法向第1行添加工具提示?我的代码:http://jsfiddle.net/Qquse/550/functiondrawChart(){vardata=newgoogle.visualization.DataTable();data.addColu

javascript - 如何使用 Chart.js 向我的折线图添加点击事件

我正在尝试使用Chart.js将点击事件添加到我的折线图中.我已经启用了工具提示来显示折线图中的信息,但我还想添加一个单击方法,让我知道用户在x轴上单击的位置。现在我只想弹出一个警报,给我用户点击的x轴上的值。研究:我浏览了documentationofChart.js我遇到了这个方法:.getPointsAtEvent(event)CallinggetPointsAtEvent(event)onyourChartinstancepassinganargumentofanevent,orjQueryevent,willreturnthepointelementsthatareattha

javascript - Chart.js折线图设置背景色

我正在使用Chart.js并希望将折线图转换为PNG。问题是图像总是以透明背景下载,这不是我需要的。我尝试了很多选项,但没有任何效果。和建议? 最佳答案 这是一个完美的解决方案,在保存到图像文件(如png)时也是如此。我在chartjsissuetracker公然从@etimberg复制这个.Chart.plugins.register({beforeDraw:function(chartInstance){varctx=chartInstance.chart.ctx;ctx.fillStyle="white";ctx.fillRe

javascript - 在 D3 中绘制多边形数据的正确格式

我试过这些不同的方法,但似乎没有任何效果。这是我目前拥有的:varvis=d3.select("#chart").append("svg").attr("width",1000).attr("height",667),scaleX=d3.scale.linear().domain([-30,30]).range([0,600]),scaleY=d3.scale.linear().domain([0,50]).range([500,0]),poly=[{"x":0,"y":25},{"x":8.5,"y":23.4},{"x":13.0,"y":21.0},{"x":19.0,"y":1

javascript - 如何在没有 ctx.bezierCurveTo 的情况下使用原生 Javascript 代码绘制贝塞尔曲线?

我需要在没有ctx.bezierCurveTo方法的情况下使用原生Javascript绘制并获取每个步骤的贝塞尔曲线坐标。我找到了几个资源,但我很困惑。特别是this看起来很接近,但我无法清楚地实现。我怎样才能做到这一点? 最佳答案 您可以绘制贝塞尔曲线:bezier=function(t,p0,p1,p2,p3){varcX=3*(p1.x-p0.x),bX=3*(p2.x-p1.x)-cX,aX=p3.x-p0.x-cX-bX;varcY=3*(p1.y-p0.y),bY=3*(p2.y-p1.y)-cY,aY=p3.y-p0.

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

JAVA 如何绘制三维地形图 —— Matplot3D for java V4.0教程:DataGridProcessor处理器详解

文章目录一、Matplot3DforJAVAV4.0概述二、什么是处理器三、DataGridProcessor处理器四、基本使用方法五、举个栗子:绘制高程地形图一、Matplot3DforJAVAV4.0概述  Matplot3DforJAVA 是一个基于JAVASE1.8环境开发的数学科学数据三维可视化组件。这是一个纯JAVA实现的类似matplotlib可视化三维库(内含纯java实现的3维软引擎),封装为一个jar包,jar文件大小只有200多KB,直接引用即可。无需再安装和配置第三方库或者环境,无需依赖OpenGL、DriectX、JAVA3D或JAVAFX等等。下载地址 码云:   

javascript - 如何平滑徒手绘制的 SVG 路径?

我正在寻找一种解决方案,将由大量aufLineTo段组成的徒手绘制的用户绘制的SVG路径转换为更平滑的路径。首选语言是JavaScript,但欢迎提出任何建议。 最佳答案 首先,我会推荐使用一个好的图形库,比如raphael。它将简化实际使用javascript执行绘图的过程。一个很简单的平滑方法就是将所有的lineto命令转换成等价的curveto命令,然后根据每条线段的Angular计算出一些控制点。例如,成为这两个都要画一个等边三Angular形下一步是计算控制点的位置。通常,您会希望平滑Angular两侧的控制点落在一条穿过

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 - 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: