草庐IT

Bar-chart

全部标签

javascript - 将时间格式化为小时 :minutes on a Google Charts y-axis

我有一个Google图表,其中y轴以分钟为单位。如何设置y轴的格式以便标签以类似2hrs40的格式显示时间,或2:40,或类似的东西?我不想以原始分钟显示时间,也不想将它显示为像“1.5”这样的小数90分钟。documentation告诉我使用ICUPatternSet,但我无法从该页面中找出答案。这可能吗?如果我不能像这样直接格式化时间,有没有办法在事后通过更改来“破解”图表?使用Javascript的元素? 最佳答案 格式化选项不允许您这样做。但是,您可以使用vAxis.ticks选项手动指定要用于刻度线的值以及要用来表示这些值

javascript - d3JS : Plot lower-density data version of a large data set when zoomed out on line/area chart

我正在创建一个类似于MikeBostock's的图表可缩放面积图。对于我的特定项目,我有一组传感器,每30秒记录一次值(温度、光线、湿度和声音)。我有缩放实现工作,但是当我缩小到一年的比例时,图表的密度会减慢浏览器的速度并且图形也不会读取。如何编辑脚本,使折线图的密度相对于缩放量发生变化?换句话说,x域控制着值(value)线上的点数。当我放大到一个小时的时间范围时,我想要全密度(每30秒记录一次),而当我缩小时,我想要低得多的密度(每天记录一次)。有任何想法吗?使用上面链接中的脚本实现会很有帮助。谢谢!svg{font-size:10px;}.axis{shape-rendering

javascript - chart.js 颜色不渲染

我正在尝试使用chart.js创建一个简单的实时折线图/散点图,z-indexed作为我的应用程序的背景。出于某种原因,它呈现为不透明的灰色,而不是我指定的淡红色。而且,即使我尝试更改其他图表元素和默认值,图表始终是灰色的。我确定这是一个微不足道的修复,但我无法弄清楚。这里是JSBin的链接具有完整代码。(您需要在图表显示任何数据之前设置并启动计时器)此外,更具体地说,这是与创建图表相关的JS代码:varctx=document.getElementById('canvas').getContext("2d"),points=[{x:0,y:0}],lineData={datasets

javascript - 从 Chart.js 的数据点进一步移动工具提示?

我今天开始弄乱Chart.js,到目前为止,它的易懂性给我留下了深刻的印象,即使对于像我这样的JavaScript初学者也是如此。我想在工具提示和图表上的数据点之间添加一些水平间距。默认情况下,插入点接触数据点。我想不通。我知道有一个position选项,但我不太明白它是如何使用的。我也尝试使用tooltips:{x}选项,但也没有成功。我猜我误解了那是干什么用的。下面是我到目前为止的一张图表...谢谢,感激不尽!//GlobalChart.jsoptionsChart.defaults.global.defaultFontFamily='Lato';Chart.defaults.gl

javascript - Angular-Chart 不渲染任何东西

我正在使用AngularJS构建应用程序。在这个应用程序中,我想显示一个包含一些数据的折线图。我有一个包含两个“标签”的页面。我为此使用了自己的实现:顶部的两个按钮,$scope.graph.visiblebool值,通过单击这些按钮进行设置。这是HTML中的图表:在Controller中我得到了这个:$scope.graph.data=[1,2,3,4,5,6,7,8];$scope.graph.labels=['hoi','doei','hallo','hee','hoi','doei','hallo','hee',];$scope.graph.options={animation

javascript - chart.js 折线图,每个部分具有不同的背景颜色

假设我有一个4周的周一至周五折线图。我希望将这4周分成几个部分。我希望第一个星期一到星期五的背景色为白色。第二个星期一到星期五灰色背景。第三个又是一个白色的背景。而第四周的星期一到星期五要有灰色背景色。我所说的是图表的背景。有办法做到这一点吗? 最佳答案 Chart.js在绘制(或重新绘制)图表之前清除Canvas。一旦图表被清除,我们就可以开始这个并绘制我们的背景。只需扩展折线图并覆盖初始化覆盖中的清除功能即可。预览脚本Chart.types.Line.extend({name:"LineAlt",initialize:funct

javascript - typeof foo ['bar' ] !== 'undefined' 与 foo 中的 'bar'

这两个表达式的返回值有什么区别...表达式1:typeoffoo['bar']!=='undefined'表达式2:'bar'infoo...假设满足这些条件:foo是一个对象,foo不包含任何显式设置了值undefined的属性。 最佳答案 第一个测试foo中bar的值。第二个测试foo中是否存在bar属性。varfoo={bar:undefined};typeoffoo['bar']!=='undefined';//false'bar'infoo;//true编辑:为了从下面的评论中添加一些说明,OP遇到的问题是访问window

javascript - d3.js 如何向条形图添加线条

我有一个包含4个值的数据集。[ABCD]。目前它们显示在条形图中,每个值一个条。现在,由于值c和d是平均值,我想将它们显示为a和b栏后面的线。d3可以吗?如何在同一个数据数组中切换条形或线形显示?感谢您的帮助。 最佳答案 我在这里发布了一个示例,因为没有一个答案在jsbin或jsfiddle等中提供了带线的条形图的工作示例。http://jsbin.com/gisinomo/1/edit该示例是d3wiki上简单条形图的一个分支。http://bl.ocks.org/mbostock/3885304CSSbody{font:10px

javascript - Chart.js 在隐藏的 Bootstrap 选项卡中呈现

这让我抓狂,我在Bootstrap选项卡中使用Chart.js,但它们不会呈现,因为加载DOM时宽度设置为零。在尝试弄清楚为什么我的图表不存在之后,我终于发现了这一点!我在网上搜索过,似乎没有什么可以解决我的问题,任何人都可以帮我解决这个问题,我想我需要一些脚本来在选择选项卡并成功加载时呈现图形我正在使用这个JS:vardata=[{value:300,color:"#F7464A",highlight:"#FF5A5E",label:"Red"},{value:50,color:"#46BFBD",highlight:"#5AD3D1",label:"Green"},{value:1

javascript - Google Charts 显示错误的月份

我有一个显示正确线条的谷歌折线图;但是日期的注释恰好偏离了一个月。json数据有正确的日期;但不知何故谷歌图表改变了它:有人知道为什么会这样吗? 最佳答案 没错,显示的是正确的月份当使用以下日期构造函数时,月份从零开始...日期(年、月、日、小时、分钟、秒、mill)请看下面的片段...console.log(newDate(2016,0,1));//以下是另一个片段,用于演示如何将json与googlecharts结合使用...google.charts.load('current',{callback:function(){va