Rah*_*pta 5 javascript jquery charts graph highcharts
我使用column chart带drilldown。这是我的JSFIDDLE。
现在我的问题是:
正如您可以从我的小提琴中注意到的那样,我已经尝试使用以下代码在 x 轴标签上应用格式:
xAxis: {
type: 'category',
labels:{
style:{
color: 'red',
textDecoration:"none"
}
}
},
Run Code Online (Sandbox Code Playgroud)
并使用以下代码格式化数据标签:
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%',
style:{
color: 'blue',
textDecoration:"none"
}
}
}
}
Run Code Online (Sandbox Code Playgroud)
但问题是:格式仅适用于没有向下钻取数据的x 轴标签和数据标签。虽然它适用于钻取数据的所有 x 轴标签和数据标签!
有用的参考资料:http : //api.highcharts.com/highcharts#xAxis.labels.style http://api.highcharts.com/highcharts#series.data.dataLabels
任何帮助将不胜感激 !
我们可以使用下钻选项来控制下钻。
drilldown: {
//for axis label
activeAxisLabelStyle: {
textDecoration: 'none',
fontStyle: 'italic'
},
//for datalabel
activeDataLabelStyle: {
textDecoration: 'none',
fontStyle: 'italic'
}
}
Run Code Online (Sandbox Code Playgroud)
[参考:http : //jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/drilldown/labels/] [1 ]
您需要覆盖钻取功能,以避免向标签添加操作。
http://jsfiddle.net/phpdeveloperrahul/FW64T/
(function (H) {
H.wrap(H.Point.prototype, 'init', function (proceed, series, options, x) {
var point = proceed.call(this, series, options, x),
chart = series.chart,
tick = series.xAxis && series.xAxis.ticks[x],
tickLabel = tick && tick.label;
if (point.drilldown) {
// Add the click event to the point label
H.addEvent(point, 'click', function () {
point.doDrilldown();
});
// Make axis labels clickable
if (tickLabel) {
if (!tickLabel._basicStyle) {
tickLabel._basicStyle = tickLabel.element.getAttribute('style');
}
tickLabel.addClass('highcharts-drilldown-axis-label') .css({
'text-decoration': 'none',
'font-weight': 'normal',
'cursor': 'auto'
})
.on('click', function () {
if (point.doDrilldown) {
return false;
}
});
}
} else if (tickLabel && tickLabel._basicStyle) {
}
return point;
});
})(Highcharts);
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
6598 次 |
| 最近记录: |