您的位置:首页 > 其它

画图工具除了echarts我使用highcharts

2017-06-28 18:48 302 查看
文件 :密码:xewx

官方文档教程地址:https://www.hcharts.cn/docs/basic-color

上手容易,api友好,尽管也有不尽人意的地方,但是它很适合我当前的项目,如果想要更好的效果,花点时间去研究一下echarts.js还是很好的。

代码:

1 //容器
2 <div id='main'></div>
3 //脚本
4 $("#main").highcharts({
5     chart: {
6         type: 'line'
7     },
8     credits: {
9         enabled: false // 禁用版权信息
10     },
11     title: {
12         text: "模拟的"
13     },
14     xAxis: {
15         categories: ['05-31','06-31','07-31','08-31','09-31','10-31']
16     },
17     yAxis: [{
18         lineWidth: 1,
19         title: {
20             text: '收益(元)'
21         }
22     }, {
23         title: {
24             text: '收盘价(元)'
25         },
26         lineWidth: 1,
27         opposite: true
28     }, {
29         title: {
30             text: '大盘'
31         },
32         lineWidth: 1,
33         opposite: true
34     }],
35     series: [{
36         data: [10,20,15,33],
37         yAxis: 2,
38         name: '大盘',
39         color: "#9B59B6"
40     }, {
41         data: [10,25,30,53],
42         yAxis: 1,
43         name: '收盘价',
44         color: "#3498DB"
45     }, {
46         data: [10,20,15,33,66,78],
47         name: '收益(红盈利|绿亏损)',
48         color: "#E74C3C",
49         yAxis: 0,
50         zones: [{
51             value: 0,
52             color: '#2ECC71'
53         }]
54     }]
55 });


代码-柱状图,为了找修改颜色,我可是花了时间的。

1 //画图主桩
2 $('#zhu').highcharts({
3     chart: {
4         type: 'column',
5     },
6     title: {
7         text: '平均值'
8     },
9     xAxis: {
10         categories: [
11             '一月',
12             '二月',
13             '三月',
14             '四月',
15             '五月',
16             '六月',
17             '七月',
18             '八月',
19             '九月',
20             '十月',
21             '十一月',
22             '十二月'
23         ],
24         crosshair: true
25     },
26     yAxis: {
27         min: 0,
28         title: {
29             text: '量 (mm)'
30         }
31     },
32     plotOptions: {
33         column: {
34             colorByPoint:true
35         }
36     },
37     series: [{
38         name: '北京',
39         data: [
40             {
41                 y:49.9,
42                 color:"#ff0000"}]
43     }]
44 });
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: