highcharts做柱状图，怎样设置柱子宽度

可以通过设置plotOptions内对应series的pointWidth也就是数据点的宽度值加以控制，完整代码如下所示：

view sourceprint?

01.$(function () {

02.$('#container').highcharts({

03.chart: {

04.type: 'bar'

05.},

06.xAxis: {

07.categories: ['Jan', 'Feb', 'Mar']

08.},

09.

10.plotOptions: {

11.series: {

12.pointWidth: 3 //柱子的宽度值 单位为px

13.}

14.},

15.credits: {

16.text: 'highcharts的博客',

17.href: '',

18.position: {

19.align: 'right', //水平居右

20.verticalAlign: 'bottom' //垂直底部

21.},

22.style: {

23.cursor: 'pointer', //鼠标样式为手型

24.color: '#FF0000', //字体颜色

25.fontSize: '10px' //字体大小

26.}

27.},

28.series: [{

29.data: [29.9, 71.5, 106.4]

30.}]

31.});

32.});

如何设置 highcharts X轴和Y轴值

highcharts所有的图表除了饼图都有X轴和Y轴，默认情况下，x轴显示在图表的底部，y轴显示在左侧（多个y轴时可以是显示在左右两侧），通过设置chart.inverted = true 可以让x，y轴显示位置对调。

1、Axis Title

坐标轴标题。

2、Axis Labels

坐标轴标签（分类）。Labels常用属性有enabled、formatter、setp、staggerLines

1）enabled

是否启用Labels。x，y轴默认值都是true，如果想***用（或不显示）Labels，设置该属性为false即可。

2）Formatter

标签格式化函数。默认实现是：

formatter:function(){

return this.value;

}

3）Step

Labels显示间隔，数据类型为number（或int）。

4）staggerLines

水平轴Lables显示行数。（该属性只对水平轴有效）当Lables内容过多时，可以通过该属性控制显示的行数。和该属性相关的还有maxStaggerLines属性。

3、Axis Tick

Tick为坐标轴刻度。默认情况下x轴刻度高(tickLength属性)为5px，宽为1px；y轴宽为0px(也就是不显示刻度)。Tick相关的属性主要有tickLength、tickWidth、tickColor、tickInterval、tickmarkPlacement。

1）tickLength、tickWidth、tickColor

分别代表刻度线的长度、宽度、颜色。

2）tickInterval

刻度间隔。其作用和Lables.step类似，就是不显示过多的x轴标签内容，不同的是，tickInterval是真正意义上的调整刻度，而Lables.step只是调整Labels显示间隔。所以在实际应用中，tickInterval用的多。

针对不同数据类型的坐标轴有不同的默认值。对于线性数据和Datetime类型数据，其默认值是tickPixelInterval值，对于Categorty表示间隔一个category。

3）tickmarkPlacement

刻度线对齐方式，有between和on可选，默认是between。

4、Axis gridLines

坐标轴网格线。默认情况下，x轴网格线宽度为0,y轴网格线宽度为1px。网格线共有三个属性可设置，分别是: gridLineWidth、gridLineColor、gridLineDashStyle

1）gridLineWidth

网格线宽度。x轴默认为0，y轴默认为1px。

2）gridLineColor

网格线颜色。默认为：#C0C0C0。

3）gridLineDashStyle

网格线线条样式。和Css border-style类似，常用的有：Solid、Dot、Dash。

自己对照着设置吧。

详细请参考：

类似echarts还有哪些图表

类似echarts小程序的图表组件列举：

1、fusionCharts

FusionCharts是一个跨平台，能够跨浏览器的flash图表组件，能够被ASP NET、JSP、ColdFusion、ASP、PHP、Ruby on Rails、简单HTML页面甚至PPT调用。FusionCharts利用Flash创建了紧凑、互动性和视觉逮捕图表，还可以用来制作数据动画图表。

2、Highcharts

Highcharts是一个用纯Javascript编写成的一个图表库， 能够很简单便捷的在Web网站或Web应用程序添加有交互性的图表。

可支持的图表类型包括直线图、饼状图、仪表图、气泡图、散状点图、曲线图、区域图、柱状图、瀑布流图等20多种图表，其中很多图表可以集成在同一个图形中形成混合图。

3、AntV-f2

AntV-f2是一个专注于移动，开箱即用的可视化解决方案，支持H5环境和兼容多种环境。里面具备了比较完整的图形语法理论和组件，具有多种移动端图表和各类场景，而且个人可以构建各类图表（50种以上）。

扩展资料

制作图表时要注意：

1、要有自身的表达特性，尤其对时间、空间等概念的表达和一些抽象思维的表达具有文字和言辞无法取代的传达效果。图表要具有表达的准确性，对所示事物的内容、性质或数量等处的表达应该准确无误。

2、要有信息表达的可读性，在图表认识中应该通俗易懂，尤其是用于大众传达的图表。

3、制作图表要有艺术性，图表是通过视觉的传递来完成，必须考虑到人们的欣赏习惯和审美情趣，这也是区别于文字表达的艺术特性。

hcharts的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于hcharts cn、hcharts的信息别忘了在本站进行查找喔。