JavaScript：highcharts示例

来源：互联网发布：苹果电脑自带修图软件编辑：程序博客网时间：2024/06/10 02:22

现在的可视化、前端也是越来越炫酷。

必要的几个js文件可以去highcharts官网上面找。

链接：highcharts官网

Reviews： JavaScript：sparkline插件

<html><head><script src="jquery-1.8.3.min.js"></script><script src="highstock.js"></script></head><body><div id="container" style="width:300px;height:200px"></div><script type="text/javascript">        var ichart = new Highcharts.stockChart( {            chart: {               renderTo: "container",        animation: true        },           credits: {               enabled: true           },           scrollbar: {               enabled: true           },           exporting: {               enabled: false           },           rangeSelector: {               enabled: true           },           navigator: {               enabled: true           },           xAxis: {               visible: false           },           yAxis: {               visible: false,               minPadding: 0,               maxPadding: 0           },           series: [{              animation:true,               type: 'candlestick',               name: 'AAPL',               color: 'green',               lineColor: 'green',               upColor: 'red',               upLineColor: 'red',               data: [[1,5,6,2,3], /* time, open high low close*/                      [2,3,5,2,4],                      [3,3,5,2,4],                      [4,3,5,2,4],                      [5,3,5,2,4],                      [6,3,5,2,4],                      [7,3,5,2,4],                      [8,3,5,2,4],                      [9,3,5,2,4],                      [10,3,5,2,4],                      [11,3,5,2,4],                      [12,3,5,2,4],                      [13,3,5,2,4]                     ],           }]        });</script>

鼠标悬停还有tips提示……

<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Author" content="qcy"><meta name="Keywords" content="tech indicator"><meta name="Description" content="buy sell tips"></head><script src="jquery-1.8.3.min.js" type="text/javascript"></script><script src="highstock.js" type="text/javascript"></script><script type="text/javascript" src="./jquery.sparkline.js"></script><body><!-- 折线图 --><div id="container_gbp"style="width: 138px; height: 80px; background-color: red;padding-right: 0px;"></div></body><script type="text/javascript">var ichart = new Highcharts.stockChart({chart : {renderTo : "container_gbp",animation : false},credits : {enabled : false},scrollbar : {enabled : false},exporting : {enabled : false},rangeSelector : {enabled : false},navigator : {enabled : false},xAxis : {visible : false,},yAxis : {visible : false,minPadding : 0,maxPadding : 0},series : [ {name : 'AAPL Stock Price',data : [ [ 1, 1 ], [ 2, 2 ], [ 3, 3 ], [ 4, 2 ], [ 5, 2.3 ],[ 6, 4 ] ],type : 'area', // 可以写 bar,line,area等…… threshold : null,tooltip : {valueDecimals :2},fillColor : {linearGradient : {x1 : 0,y1 : 0,x2 : 0,y2 : 1},stops : [[ 0, Highcharts.getOptions().colors[0] ],[1,Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba') ] ]}} ]});</script></html>

阅读全文

0 0