HighCharts 改源码,添加次刻度尺

本次修改以HighCharts4.0.3.src.js源码为基础修改,添加刻度尺次刻度,如有什么bug还请大家提出纠正.

主要修改highcharts.src.js:

row:2550----destroy: function (),做如下修改,目的是在刻度尺销毁时销毁次刻度尺

var wrapper = this,
marks = wrapper.marks,
marks2 = wrapper.marks2,
element = wrapper.element || {},
shadows = wrapper.shadows,
parentToClean = wrapper.renderer.isSVG && element.nodeName === 'SPAN' && wrapper.parentGroup,
grandParent,
key,
i;
if(marks){
for (mk in marks) {
if(marks[mk]&&marks[mk].destroy)
marks[mk].destroy();
}
}
if(marks2){
for (mk in marks2) {
if(marks2[mk]&&marks2[mk].destroy)
marks2[mk].destroy();
}
}

row:5835----render: function (index, old, opacity),做如下修改,目的是生成次刻度尺.

render: function (index, old, opacity) {
		var tick = this,
			axis = tick.axis,
			options = axis.options,
			chart = axis.chart,
			renderer = chart.renderer,
			horiz = axis.horiz,
			type = tick.type,
			label = tick.label,
			pos = tick.pos,
			labelOptions = options.labels,
			gridLine = tick.gridLine,
			gridPrefix = type ? type + 'Grid' : 'grid',
			tickPrefix = type ? type + 'Tick' : 'tick',
			gridLineWidth = options[gridPrefix + 'LineWidth'],
			gridLineColor = options[gridPrefix + 'LineColor'],
			dashStyle = options[gridPrefix + 'LineDashStyle'],
			tickLength = options[tickPrefix + 'Length'],
			tickWidth = options[tickPrefix + 'Width'] || 0,
			tickColor = options[tickPrefix + 'Color'],
			tickPosition = options[tickPrefix + 'Position'],
			secTickInterval = options['secTickInterval'],
			gridLinePath,
			mark = tick.mark,
			markPath,
			step = labelOptions.step,
			attribs,
			show = true,
			tickmarkOffset = axis.tickmarkOffset,
			xy = tick.getPosition(horiz, pos, tickmarkOffset, old),
			x = xy.x,
			y = xy.y,
			reverseCrisp = ((horiz && x === axis.pos + axis.len) || (!horiz && y === axis.pos)) ? -1 : 1; // #1480, #1687

		opacity = pick(opacity, 1);
		this.isActive = true;

		// create the grid line
		if (gridLineWidth) {
			gridLinePath = axis.getPlotLinePath(pos + tickmarkOffset, gridLineWidth * reverseCrisp, old, true);

			if (gridLine === UNDEFINED) {
				attribs = {
					stroke: gridLineColor,
					'stroke-width': gridLineWidth
				};
				if (dashStyle) {
					attribs.dashstyle = dashStyle;
				}
				if (!type) {
					attribs.zIndex = 1;
				}
				if (old) {
					attribs.opacity = 0;
				}
				tick.gridLine = gridLine =
					gridLineWidth ?
						renderer.path(gridLinePath)
							.attr(attribs).add(axis.gridGroup) :
						null;
			}

			// If the parameter 'old' is set, the current call will be followed
			// by another call, therefore do not do any animations this time
			if (!old && gridLine && gridLinePath) {
				gridLine[tick.isNew ? 'attr' : 'animate']({
					d: gridLinePath,
					opacity: opacity
				});
			}
		}

		// create the tick mark
		if (tickWidth && tickLength) {

			// negate the length
			if (tickPosition === 'inside') {
				tickLength = -tickLength;
			}
			if (axis.opposite) {
				tickLength = -tickLength;
			}

			markPath = tick.getMarkPath(x, y, tickLength, tickWidth * reverseCrisp, horiz, renderer);
			if (mark) { // updating
				mark.animate({
					d: markPath,
					opacity: opacity
				});
			} else { // first time
				tick.mark = renderer.path(
					markPath
				).attr({
					stroke: tickColor,
					'stroke-width': tickWidth,
					opacity: opacity
				}).add(axis.axisGroup);
			}
			//add Second Tick
			for(var ti = 1;ti<10;ti++){
				if(secTickInterval){
					var pos2 = pos-(axis.tickInterval*ti/10);
					if(pos2>axis.min){
						var xy2 = tick.getPosition(horiz, pos2, tickmarkOffset, old),
						x2 = xy2.x,
						y2 = xy2.y,
						markPath2 = tick.getMarkPath(x2, y2, ti==5?(tickLength*3/4):(tickLength/2), tickWidth * reverseCrisp, horiz, renderer);//细刻度
						if (mark) { // updating
							mark.marks[ti-1].animate({
								d: markPath2,
								opacity: opacity
							});
						} else { // first time
							if(!tick.mark.marks){
								tick.mark.marks = new Array();
							}
							tick.mark.marks[ti-1] = renderer.path(
								markPath2
							).attr({
								stroke: tickColor,
								'stroke-width': tickWidth,
								opacity: opacity
							}).add(axis.axisGroup);
						}
					}
					if(pos+axis.tickInterval!=axis.max&&pos+axis.tickInterval>axis.max){
						var pos3 = pos+(axis.tickInterval*ti/10);
						if(pos3<axis.max){
							var xy2 = tick.getPosition(horiz, pos3, tickmarkOffset, old),
							x2 = xy2.x,
							y2 = xy2.y,
							markPath2 = tick.getMarkPath(x2, y2, ti==5?(tickLength*3/4):(tickLength/2), tickWidth * reverseCrisp, horiz, renderer);//细刻度
							if (mark&&mark.marks2&&mark.marks2[ti-1]&&mark.marks2[ti-1].animate) { // updating
								mark.marks2[ti-1].animate({
									d: markPath2,
									opacity: opacity
								});
							} else { // first time
								if(!tick.mark.marks2){
									tick.mark.marks2 = new Array();
								}
								tick.mark.marks2[ti-1] = renderer.path(
									markPath2
								).attr({
									stroke: tickColor,
									'stroke-width': tickWidth,
									opacity: opacity
								}).add(axis.axisGroup);
							}
						}
					}
				}
			}
		}

		// the label is created on init - now move it into place
		if (label && !isNaN(x)) {
			label.xy = xy = tick.getLabelPosition(x, y, label, horiz, labelOptions, tickmarkOffset, index, step);

			// Apply show first and show last. If the tick is both first and last, it is
			// a single centered tick, in which case we show the label anyway (#2100).
			if ((tick.isFirst && !tick.isLast && !pick(options.showFirstLabel, 1)) ||
					(tick.isLast && !tick.isFirst && !pick(options.showLastLabel, 1))) {
				show = false;

			// Handle label overflow and show or hide accordingly
			} else if (!axis.isRadial && !labelOptions.step && !labelOptions.rotation && !old && opacity !== 0) {
				show = tick.handleOverflow(index, xy);
			}

			// apply step
			if (step && index % step) {
				// show those indices dividable by step
				show = false;
			}

			// Set the new position, and show or hide
			if (show && !isNaN(xy.y)) {
				xy.opacity = opacity;
				label[tick.isNew ? 'attr' : 'animate'](xy);
				tick.isNew = false;
			} else {
				label.attr('y', -9999); // #1338
			}
		}
	},

	/**
	 * Destructor for the tick prototype
	 */
	destroy: function () {
		destroyObjectProperties(this, this.axis);
	}
};

关于如何删除右下角 Highcharts.com文字
row:1557----text: 'Highcharts.com' 清除或修改文字即可

调用方式为在Axis添加secTickInterval: true属性,必须设置主刻度才有效果.

修改后的源码下载地址:点击打开链接

最后附上使用效果.