jjzjj

pie-chart

全部标签

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 - 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 - 谷歌饼图 : remove white gap between pie slices

类似于thisquestion,但对于Google饼图:如何删除Google饼图上切片之间的白线:在上图中,我想删除绿色箭头突出显示的空白区域。 最佳答案 您可以通过将pieSliceBorderColor设置为"transparent"来消除该间隙。在GoogleCodePlayground上尝试以下操作:functiondrawVisualization(){//Createandpopulatethedatatable.vardata=google.visualization.arrayToDataTable([['Task'

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 - 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 - D3.js 饼图..选中时饼图切片可以移动吗?

只是想知道是否可以用d3做这样的事情?http://jsfiddle.net/8T7Ew/当您点击某个饼图切片时,该切片会随点击移动到什么位置?到目前为止已经创建了馅饼,只是想知道我是否可以添加此功能body{font:10pxsans-serif;}.arcpath{stroke:#fff;}varwidth=960,height=500,radius=Math.min(width,height)/2;varcolor=d3.scale.ordinal().range(["#98abc5","#8a89a6","#7b6888","#6b486b","#a05d56","#d0743