草庐IT

stacked-area-chart

全部标签

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

javascript - Angular2 使用标签更新 ng2-charts

最近我开始使用Angular2工作,并且对框架ng2-charts有疑问。这是我的component.ts代码:import{Component}from'@angular/core';import{ChartsModule}from'ng2-charts';import{PredictionService}from'./prediction.service'@Component({selector:'prediction-result-chart',templateUrl:'./predictionResultChart.component.html'})exportclassPre

javascript - 使用 D3.js 可以绘制线条流畅的面积图吗?

我正在使用D3.js创建面积图,并使用平滑线制作它。是否可以?在我的代码中,我只是创建了svg并放置了线条和区域。我使用虚拟数据。下面是我的代码:http://jsfiddle.net/sota0805/mv48H///DatavarlineData=[{"x":0,"y":250},{"x":40,"y":170},{"x":80,"y":140},{"x":120,"y":220},{"x":160,"y":220},{"x":200,"y":190},{"x":240,"y":170},{"x":280,"y":140},{"x":320,"y":200},{"x":360,"y

javascript - Chart.js 折线图在顶部被 chop ?

出于某种原因,所有图表都在最高值处被chop。我怎样才能解决这个问题?我不能使用固定的y轴 最佳答案 编辑/更新:如评论中所述,5px值可以更准确地只是您的线宽值的一半,我相信默认值为2px,所以在这种情况下您只需要填充:{顶部:1}有一个layout.padding属性,您可以在选项中或全局设置。我遇到了同样的问题并设置了options:{layout:{padding:{top:5}},...}对我来说很好,不会切断线路http://www.chartjs.org/docs/#chart-configuration-layout

javascript - chart.js 不允许使用对数刻度的 y 轴步长

我不得不解析科学记数法,这是对我的图表实现对数刻度的结果,但它打印出了图表中每一行的每个值。似乎没有任何步骤方法有效。RESULTINGCHARTIMGvarpacketsElement=$("#packetsGraph");pckBarChart=newChart(packetsElement,{type:'bar',data:{labels:["Received","Errors","Lost"],datasets:[{label:'#ofPackets',data:packetsArr,backgroundColor:['rgba(55,102,245,0.3)','rgba(5

javascript - Chart.js & Angular 2 - ng2-charts 自定义点击事件

我正在尝试在我的Angular2项目中实现ng2-charts,我想知道如何创建自定义onclick事件。意思是,我想覆盖购物车上的当前onclick事件以执行一些自定义功能(重定向到页面、显示模态等)。有没有简单的方法来做到这一点?它是内置的吗?任何见解将不胜感激 最佳答案 我在https://github.com/valor-software/ng2-charts/issues/489找到了这个解决方案publicchartClicked(e:any):void{if(e.active.length>0){constchart=

javascript - 在 Chart.js 中隐藏 y 轴的最小值和最大值

我已经使用刻度配置分配了Y轴的最小值和最大值。但是我不希望这些最小最大值显示在图中。我需要在两端隐藏这些值ticks:{callback:function(value){returnparseFloat(value.toFixed(2))},min:y1_min,max:y1_max,fontColor:"#000000",fontSize:12}, 最佳答案 为了隐藏特定的刻度(在你的例子中是第一个和最后一个刻度),你必须使用scaleafterTickToLabelConversioncallbackproperty并在要隐藏的

javascript - Chart.js 条形图溢出其包含元素

Chart.js当padding已应用于容器时,我无法让这个愚蠢的图表留在其容器中。responsive选项是否设置为true并不重要。我将box-sizing设置为什么也无关紧要。如果不适合它的容器,responsive选项的目的是什么? 最佳答案 与大多数CSS一样,答案是使用另一个包装器!我遇到了同样的问题(而且我正在使用框大小调整)只需在Canvas周围放置一个div!(div将继承框大小)祝你好运:) 关于javascript-Chart.js条形图溢出其包含元素,我们在Sta

javascript - 谷歌图表 : Pie Chart title position

我被分配去实现一些图表,老板要求我把图表的标题和图表分开,我试着把图表的区域从顶部移动一点,但是标题也跟着图表移动了,比如这个:我尝试使用:chartArea:{top:80},结果如屏幕截图所示。我确定要移动的属性只是标题,它是另一个,但我还找不到。顺便说一句,这是我的整个对象:varcolumnChartProps={fontName:'HelveticaNeueBC',legend:{position:'none'},titleTextStyle:{fontSize:18},hAxis:{color:'#121b2d'},vAxis:{gridlines:{color:'#666