草庐IT

d3_graph_chart

全部标签

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 - d3、Angular 2 : node. getBoundingClientRect 不是函数

我在Angular2应用程序中使用d3绘制图表。现在我有一个多系列折线图,所以我试图在将鼠标悬停在其垂直位置时在每条线上添加工具提示。exportclassLineGraphDirective{privatehost;privatesvg;privatemargin;privatewidth;privateheight;privatexScale;//D3scaleinXprivateyScale;//D3scaleinYprivatezScale;//D3colorscaleprivatexAxis;privateyAxis;privateline;privatehtmlElemen

javascript - 具有正值和负值的 d3.js 直方图

我不知道如何在数据数组中同时存在正值和负值的情况下正确创建直方图。我在这里使用了直方图示例http://bl.ocks.org/mbostock/3048450作为基础,虽然x轴值和刻度是正确的,但条形图是午餐。数据varvalues=[-15,-20,-22,-18,2,6,-26,-18,-15,-20,-22,-18,2,6,-26,-18];X比例varx0=Math.max(-d3.min(values),d3.max(values));varx=d3.scale.linear().domain([-x0,x0]).range([0,width]).nice();在这里查看j

javascript - D3.js 获取面积图最近的 X 和 Y 坐标

您好,我有一个包含多个X(年份)和Y(价格)值的面积图。正如我发现的那样,当用户单击线上的一个点时,有一种简单的方法可以获取图表的X、Y坐标值,但是单击外部线,即SVG/图表主体区域只能提供平面坐标的X、Y而不是数据。图表上的点:circles=c.svg().selectAll'circle.dot'circles.on'click',(d)->console.log'POINT','Datum:',dO/P:POINTDatum:{x:FriFeb01198000:00:00GMT+0000(GMTStandardTime),y:666}图表外点:svg.on'click',()-

javascript - 如何使用chart js或其他库绘制甘特图

我想绘制如下所示的甘特图chartjs中没有绘制甘特图的选项。可能吗??如果不可能,请建议我一些图表库来绘制这样的图表 最佳答案 我建议您使用散点图。在散点图中,您可以绘制多条独立的线。如下图所示。[示例代码]varscatterChart=newChart(ctx1,{type:'line',data:{datasets:[{label:'ScatterDataset',backgroundColor:"rgba(246,156,85,1)",borderColor:"rgba(246,156,85,1)",fill:false,

javascript - D3.js 缩放从数据集中返回错误值

我在d3.js中遇到了scales的问题。当我在Firefox控制台中输入最小值和最大值时,我得到最大值作为最小值,第二最大值作为最大值。这里有什么问题?这是我的csv文件形式的数据集:word,occurobama,11theguardian,9world,8state,8care,7pakistan,7block,6blog,6healthcare,5这是我在控制台中输入的内容以及返回的值:d3.min(dataset,function(d){returnd.occur});=>"11"d3.max(dataset,function(d){returnd.occur});="9"d

javascript - D3 分组条形图 : How to rotate the text of x axis ticks?

我使用的是分组条形图(http://bl.ocks.org/mbostock/3887051),但是x轴的文字很长,如附图所示。如何旋转文字?谢谢你。 最佳答案 可以找到合理的解决方案here结果是这样的:确保您完全理解这部分代码:svg.append("g").attr("class","xaxis").attr("transform","translate(0,"+height+")").call(xAxis).selectAll("text").style("text-anchor","end").attr("dx","-.8

Javascript Chart.js 缩放修复

我有一个关于Chart.js的简单问题,我想知道如何修复我的图表。我使用Chart.js和respChartJS(https://github.com/arifLogic/respChartJS)演示:http://jsfiddle.net/k3YH7/1/vardata={labels:["Something#1","Something#2","Something#3"],datasets:[{fillColor:"rgba(224,34,34,0.5)",strokeColor:"#830505",data:[1500,1500,1500]}]}respChart($("#char

javascript - 如何使用 chart.js 创建两个 x 轴标签

有一种方法可以为y轴创建两​​个标签。但是如何在chart.js中制作多个x轴标签?例如:图中的示例:Howtogroup(two-level)axislabels 最佳答案 仅适用于v2(v3参见@LeeLenalee的回答)这个问题已经在github上回答了here这是一个有效的JSFiddlevarctx=$("#c");varmyChart=newChart(ctx,{type:'line',data:{labels:["January;2015","February;2015","March;2015","January;

javascript - Chart.js Line,负点的不同填充颜色

当点为负时,我需要更改LineChart.js中的填充颜色(内部区域)。代码简单基础:$(document).ready(function(){varctx=$("#myChart").get(0).getContext("2d");vardata={labels:["January","February","March","April","May","June","July"],datasets:[{label:"MyFirstdataset",//fillColor:"rgba(60,91,87,1)",//String-thecolortofilltheareaunderthel