gooalfront / d4.js Goto Github PK

	options:{
		chart:{
			// el mouted
			el:"#el",
			// chart type
			type:'line'
			// data of chart
			data:[],
			// title describe
			title:'this is title describe',
			// title click callback
			dblclick:function(){}
			// title mouseover callback  参数分别是事件对象和当前title的d3对象
			mouseover:function(ev,obj){}
			 // 自定义颜色
			colors:[],
			// title mouseout callback 参数同上
			mouseout:function(ev,obj){}
			// 是否开启图的数据选择
			enableChartSelect:true,
			// 数据选择时候的回调，参数是选择的数据
			padding:1, // 最大1 柱子的留白 0-1
			innerPadding,// 分组柱状图的分组内柱子留白 0-1
			onselect:function(data){}, // 选择数据的时候回调
			clearselect:function(){} // 清空数据的时候回调
			// 画图时使用的数据key 默认是 x,y,category（按顺序来） 不想使用默认的数据key时  可以另外指定
			custom:['key','value','category']
			direction:"horizontal" // 针对柱状图有效，horizontal / vertical (柱子方向，水平或者垂直)
			// 自定义分类顺序 针对有分类的图
			orderBy:[],
			// 是否平滑 针对折线有用  'cardinal step natural linear basic default->linear
			interpolate:'cardinal',
			// 针对饼图，环形图，玫瑰图  自定义饼间距
			padding:0.02,
			// 针对饼图，环形图，玫瑰图 外圆半径
			outerRadius:120,
			// 针对饼图，环形图，玫瑰图 内圆半径
			innerRadius:0
			//  针对饼图，环形图，玫瑰图 开始角度
			startAngle:0,
			// 针对饼图，环形图，玫瑰图 结束角度
			endAngle:360,
			// 针对饼图，环形图，玫瑰图  是否显示文字信息
			showLabel:true,
			 // 针对玫瑰图  内圆最小半径，不传默认0
			minRadius: 100,
			// 图中有圆形的时候有用，设置圆的半径
			radius:4,
			// 针对散点图，设置鼠标hover半径大小
			hoverRadius:6,
			// 针对箱线图的配置
			scatter:{
				show:true,
				style:{
					fill:"#000"
				}
			}，
			// 针对聚类图的配置
			heatmap:{
				width:480,
				height:480
			},
			leftCluster:{
				show:true,
				stroke:"#ccc"
			},
			topCluster:{
				show:true,
				stroke:"#ccc"
			},
		},
		axis:{
			x:{
				// x 标题
				title:"x标题",
				// x标题点击回调
				dblclick:function(event){
					// this
				},
				// x轴文字旋转
				rotate:60,
				//基础图适用 x轴刻度文字格式化函数 val当前的刻度文字
				formatter:val=>val,
				position:"bottom" // bottom top
			},
			y:{
				// y 标题
				title:"y标题",
				 // y标题点击回调
				dblclick:function(event){
					// this
				},
				//基础图适用 y轴刻度文字格式化函数 val当前的刻度文字
				formatter:val=>val,
				position:"left" // left right
			},
		},
		legend:{
				// 是否显示图例
				show: true,
				//图例标题  默认不做溢出处理
				title:"sample num",
				// 图例位置 目前只能right
				position: "right",
				// 图例双击回调
				dblclick: function(d,i) {
					console.log(d,i);
				}
		},
		// 提示框 d当前数据
		tooltip:function(d){
			return (
					"<span>样本：" +
					d.data.sample_name +
					"</span><br><span>占比：" +
					(d[1]-d[0]) +
					"%</span>"
				);
		}
	}