1. 程式人生 > >畫圖工具除了echarts我使用highcharts

畫圖工具除了echarts我使用highcharts

line ext 文件 target false 收盤價 edits 大盤 top

文件 :密碼: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 });

畫圖工具除了echarts我使用highcharts