阅读数:

react图表highchart实践_折线图

0

说明

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

0、按指定颜色数据;
1、折线颜色自定义;
2、不显示横纵坐标标尺;
3、明文显示折点数据。

实现

  • 引入

    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
89
90
91
92
93
this.state =
{
hightOP: {
chart: {
spacingTop: 25,
spacingRight: 30,
type: 'line',
height:160,
},
title: {
text: ''
},
subtitle: {
text: ''
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}分数</b>' // tip显示
},
xAxis: {
lineColor: '#888888', // 坐标基准线色值
lineWidth: 2, // 坐标基准线色值
tickWidth: 0,
title: {
align: 'high',
offset: 0,
text: '学期',
style: {
color: '#505050',
fontSize: '12px'
},
rotation: 0,
y: -10,
x: 28
},
categories: ['1', '2', '3', '4', '5'],
labels: {
enabled: false // 禁止标尺
}
},
yAxis: {
minPadding: 1,
maxPadding: 1,
gridLineWidth: 0, // 隐藏横向网格线
lineColor: '#888888',
lineWidth: 2,
title: {
align: 'high',
offset: -10,
text: '分数',
style: {
color: '#505050',
fontSize: '12px'
},
rotation: 0,
y: -5
},
labels: {
enabled: false // 禁止标尺
}
},
plotOptions: {
series: {
marker: {
radius: 6,
fillColor: '#18baa2',
}
},
line: {
color: '#cbebe6', // 折线色值
lineWidth: 8, // 折线宽度
dataLabels: {
enabled: true,
color: '#505050',
style: {
fontSize: '12px'
},
y: -10
},
enableMouseTracking: true
}
},
series: [{
name: '',
data: [84, 88, 89, 79, 88]
}],
credits: {
enabled: false
}
}
};

最终效果

react-highcharts


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


0
赏点咖啡钱^.^