图表column与bar使用用法
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图表column与bar使用用法相关的知识，希望对你有一定的参考价值。
参考技术A column chart 和bar chart的区别从意义，表示频数的方式，数据和距离这四个方面来看。一，从意义看区别：cloumn chart是纵置的竖条，考试给出的全是竖着的，所以说用cloumn更准确，也称为柱形图。bar chart严格意义上来说是横条形状的。条形图可以横置或纵置。条形图有简单条图、复式条形 图等形式。
二，从表示频数的方式看区别：cloumn chart直方图实际上是用长方形的面积表示频数,当长方形的宽相等的时候可以用矩形的的高表示频数。bar chart条形图是用条形的高度表示频数的大小。
三，从数据看区别：loumn chart直方图中，横轴上的数据是连续的，是一个范围；bar chart条形图中,横轴上的数据是孤立的,是一个具体的数据，
四，从距离看区别：cloumn chart直方图中，各长方形是靠在一起的 。bar chart条形图中，各长方形之间有空隙。
如何仅在Highchart中的Column或Bar的顶部应用borderRadius
根据Highchart的API文件：https://api.highcharts.com/highcharts/plotOptions.column.borderRadius
但是我找不到将borderRadius仅应用于列顶端的解决方案。
plotOptions: {
column: {
borderRadius: 10 // How to make it only for top side. Don't apply it to bottom side ?
}
},
示例图像
答案
使用这个highcharts-border-radius插件。
$(function() {
'use strict';
(function(factory) {
if (typeof module === 'object' && module.exports) {
module.exports = factory;
} else {
factory(Highcharts);
}
}(function(Highcharts) {
(function(H) {
H.wrap(H.seriesTypes.column.prototype, 'translate', function(proceed) {
const options = this.options;
const topMargin = options.topMargin || 0;
const bottomMargin = options.bottomMargin || 0;
proceed.call(this);
H.each(this.points, function(point) {
if (options.borderRadiusTopLeft || options.borderRadiusTopRight || options.borderRadiusBottomRight || options.borderRadiusBottomLeft) {
const w = point.shapeArgs.width;
const h = point.shapeArgs.height;
const x = point.shapeArgs.x;
const y = point.shapeArgs.y;
let radiusTopLeft = H.relativeLength(options.borderRadiusTopLeft || 0, w);
let radiusTopRight = H.relativeLength(options.borderRadiusTopRight || 0, w);
let radiusBottomRight = H.relativeLength(options.borderRadiusBottomRight || 0, w);
let radiusBottomLeft = H.relativeLength(options.borderRadiusBottomLeft || 0, w);
const maxR = Math.min(w, h) / 2
radiusTopLeft = radiusTopLeft > maxR ? maxR : radiusTopLeft;
radiusTopRight = radiusTopRight > maxR ? maxR : radiusTopRight;
radiusBottomRight = radiusBottomRight > maxR ? maxR : radiusBottomRight;
radiusBottomLeft = radiusBottomLeft > maxR ? maxR : radiusBottomLeft;
point.dlBox = point.shapeArgs;
point.shapeType = 'path';
point.shapeArgs = {
d: [
'M', x + radiusTopLeft, y + topMargin,
'L', x + w - radiusTopRight, y + topMargin,
'C', x + w - radiusTopRight / 2, y, x + w, y + radiusTopRight / 2, x + w, y + radiusTopRight,
'L', x + w, y + h - radiusBottomRight,
'C', x + w, y + h - radiusBottomRight / 2, x + w - radiusBottomRight / 2, y + h, x + w - radiusBottomRight, y + h + bottomMargin,
'L', x + radiusBottomLeft, y + h + bottomMargin,
'C', x + radiusBottomLeft / 2, y + h, x, y + h - radiusBottomLeft / 2, x, y + h - radiusBottomLeft,
'L', x, y + radiusTopLeft,
'C', x, y + radiusTopLeft / 2, x + radiusTopLeft / 2, y, x + radiusTopLeft, y,
'Z'
]
};
}
});
});
}(Highcharts));
}));
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
column: {
grouping: false,
borderRadiusTopLeft: 10,
borderRadiusTopRight: 10
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>以上是关于图表column与bar使用用法的主要内容，如果未能解决你的问题，请参考以下文章