草庐IT

d3_graph_chart

全部标签

javascript - Chart Js 无法读取未定义的属性 'length'

使用Chartjs我试图从Ajax调用中提取数据以提供给Chart。我发现了其他一些帖子,其中有人建议延迟Canvas加载,但似乎没有任何效果。目前这是我下面的内容,我得到的错误是$(function(){GetChartData();functionGetChartData(){$.ajax({url:ajaxURL,method:'GET',dataType:'json',success:function(d){//-------------//-BARCHART-//-------------varbarChartData=d;varbarChartCanvas=$("#barC

javascript - 结合 d3.js 和 backbone.js

我正在开发一个项目,它将所有d3.js可视化与backbone.js结合到一个页面应用程序中。由于我有很多可视化效果,例如条形图、饼图等,我想知道解决这个问题的最佳方法是什么。例如,假设我有两个条形图和一个饼图。我是否应该将所有设置的边距、比例、渲染所有图表的所有数据放在一个View中?既然有两种不同类型的图,模型应该是什么?View、Model、Controller、Collection等应该放什么?提前致谢 最佳答案 我研究了一些D3和Backbone的结合,并且有一些现有的解决方案:OverviewpresentationSh

javascript - Google Charts - 折线图工具提示中的格式化日期

在GoogleCharts中,有没有一种方法可以更改工具提示值的日期格式,而无需使其成为HTML工具提示。例如,默认情况下我得到这个:但我真正想要的是:图表代码如下:data_table=google.visualization.arrayToDataTable(graph_data_raw);chart=newgoogle.visualization.LineChart(document.getElementById('DivGraph'));chart.draw(data_table,{hAxis:{ticks:x_ticks,format:'MMMd,y',},});

javascript - Vue Chart.js - 图表在数据更改时不更新

我正在使用Vue.js和Chart.js绘制一些图表。每次调用函数generateChart()时,图表都不会自动更新。当我检查VueDevtools中的数据时,它们是正确的,但图表没有反射(reflect)数据。但是,当我调整窗口大小时图表会更新。我的做法有什么问题吗?如何在每次调用generateChart()时更新图表?我觉得这将与object和array变更检测注意事项相关,但我不确定该怎么做。https://codepen.io/anon/pen/bWRVKB?editors=1010exportdefault{data(){constself=this;return{dat

javascript - 在 d3.js 中制作弧线

我正在使用javascript库d3.js(http://d3js.org/)创建Canvas数据可视化。我正在尝试制作弧线,但它不接受来self的数组的数据参数。有谁知道我做错了什么?这是我的代码:varchartConfig={"canvasSize":800}varradius=chartConfig.canvasSize/2;varpi=Math.PI;varvis=d3.select("#chart").append("svg").attr("width",radius*2).attr("height",radius*2).append("g").attr("transfor

javascript - d._children = d.children; 的语法是什么?在 d3.js 中代表什么?

在树可视化的各种示例中,例如collapsibletree例如使用了语法d._children=d.children;。例如,在上面示例中的代码块中://Togglechildrenonclick.functionclick(d){if(d.children){d._children=d.children;d.children=null;}else{d.children=d._children;d._children=null;}update(d);}语法d._children到底是什么意思?我不清楚这是在哪里定义的,是d3.js特定的还是一般的JavaScript语法。关于涉及此类方

javascript - 如何使 Chart JS 中的两条线变粗

我用ChartJS做了一个图表,你可以在我的fiddle中看到.此图表中有三行。我想让橙色和黄色的线比现在更粗。绿色虚线就这样很好。我四处搜索,并尝试了一些东西。但是我还没有找到合适的解决方案。我希望我的问题很清楚,并且有人可以帮助我解决这个问题。HTMLJavaScriptChart.defaults.global.legend.display=false;varlineChartData={labels:['20°','30°','40°','50°','60°','70°','80°'],datasets:[{data:[null,null,null,400,320,220,90

javascript - 使用不带 DOT 的 d3.js 的有向无环图

我正在尝试使用d3.js绘制有向无环图。在搜索布局时,我遇到了Dagre但它似乎用处不大,因为我不想在任何地方使用基于DOT的代码。如果有人知道此纯Javascript解决方案或DAG的插件/自定义布局,请告诉我。提前致谢。 最佳答案 Dagre作者在这里。Dagre不包含任何graphviz代码——它是纯JavaScript。它基于类似的布局技术;两者均基于Sugiyama论文中的技术。你可以在这里找到一些dagre的例子:http://cpettitt.github.io/project/dagre-d3/latest/demo

javascript - Chart.js 条形图 : How to remove space between the bars in v2. 3?

我正在尝试删除条形图条之间的空间,但即使我在很多地方看到这个解决方案,它也不适合我。Chart.js文档中也没有提到它,所以这很奇怪。谁能告诉我如何指定它?varoptions={barValueSpacing:1,//doesn'twork;findanotherwaybarDatasetSpacing:1,//doesn'twork;findanotherwaylegend:{display:false//Hidesannoyingdatasetlabel},tooltips:{callbacks:{label:function(tooltipItem){returntooltip

javascript - 在 Chart.js 中更改 X 和 Y 轴值的颜色

我正在使用v2.*。但是,我似乎无法为折线图设置默认颜色。我主要是想设置x/y图表值的颜色。我想下面的可能会做到这一点-但它对图表根本没有任何影响。Chart.defaults.global.defaultColor='orange',更新这是一个带有实时图表的jsfiddle。简而言之,我希望更改标签的颜色,即2016年2月7日等。https://jsfiddle.net/o534w6jj/ 最佳答案 好吧,我想通了。这是我正在寻找的ticks属性...请参阅下面的代码。查看更新的jsfiddle:https://jsfiddle