阅读数:

react图表highchart实践_柱状图

0

说明

对于web 项目,图表也是常见的一种需求和功能,比如柱状图,饼状图,折线图等,图表的好处自然是
美观大方,视觉冲击力强,可阅读性强。在jquery项目中,利用highchart或者百度的echarts都很快的
上手并实践,而我们的react项目能不能信手拈来呢,答案是肯定,我们找来了 react-highcharts,
通过研究其文档发现和jquery的调用配置一样。
今天我要实现的是柱状图,要求:

0、显示成绩,大于等于60和小于60不同颜色标注;
1、不能有背景的横向引导线;
2、不能有横向和纵向坐标显示;
3、显示一个标尺,如60;
4、横轴有条基准线。

实现

  • 引入

    1
    import ReactHighcharts from 'react-highcharts';
  • usage

1
<ReactHighcharts config={this.state.hightOP}></ReactHighcharts>
  • config
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
this.state = {
hightOP: {
chart: {
type: 'column'
},
title: {
text: ''
},
subtitle: {
text: ''
},
legend: {
enabled: false // 隐藏图例
},
tooltip: {
pointFormat: '{point.y}分</b>'
},
xAxis: {
lineColor: '#888888',
lineWidth: 1, // 横向底部基准线
tickWidth:0, // 隐藏横向每个单元格标尺
title:{
align: 'high',
offset: 0,
text: '',
rotation: 0,
y: -15
},
categories: ['1', '2', '3', '4', '5'],
labels: {
enabled: false // 隐藏横向每个单元格备注('1', '2', '3', '4', '5')
}
},
yAxis: {
startOnTick: false,
endOnTick: false,
gridLineWidth:0, // 隐藏横向网格线
title:{
text: ''
},
labels: {
enabled: false // 隐藏纵向每个单元格备注(分数:10,20,30,40...)
},
plotLines: [{
color: '#cdcdcd', // 横向基准线
dashStyle: 'dot',
width: 2,
value: 60, // 定义在60
label: {
align: 'right',
style: {
fontStyle: 'italic'
},
text: '60',
x:-5,
y: 5
},
zIndex: 3
}]
},
plotOptions: {
column: {
dataLabels: {
enabled: true,
color:'#ffffff',
style:{
fontSize:'14px'
},
y:30
},
enableMouseTracking: true
}
},
series: [{
name: '',
data: [
{y:88,color:'#18baa2'},
{y:70,color:'#18baa2'},
{y:90,color:'#18baa2'}, // 大于60
{y:56,color:'#ff7156'}, // 小于60
{y:88,color:'#18baa2'},
]
}],
credits:{
enabled:false // 隐藏右下角版权
}
}
};

最终效果

react-highcharts


^-^欢迎回复交流^-^


0
赏点咖啡钱^.^