關於chartjsk線圖的信息

• 1、如何用highCharts繪製動態股票K線圖
• 2、echarts 怎樣用js自定義圖表數據
• 3、如何看懂k線圖？（最好有圖解）
• 4、Open Flash Chart K線圖求教
• 5、前端用echarts實現表格形柱形圖的有哪些

highcharts如何實現動態刷新

實現的是折線圖。目前已經實現了從資料庫中載入數據，但是定時刷新數據不知道怎麼實現。

使用chart.series[0].setData(data);每次刷新後表數據就沒有了，不知道是不是data的格式寫錯了，

想問下參數data的數據格式的例子。

function getForm(){

//使用JQuery從後台獲取JSON格式的數據

$.ajax({

type: “POST”,

url: “chart.ashx”,

success: function(data){

chart.series[0].setData(data);

},

error:function(msg)

{

alert(“通信錯誤!”);

}

});

$(document).ready(function() {

//每隔1秒自動調用方法，實現圖表的實時更新

window.setInterval(getForm,10000);

});

引入ECharts

echarts提供多種引入方式，請根據你的項目類型選擇合適的方式：

模塊化包引入

如果你熟悉模塊化開發，你的項目本身就是模塊化且遵循AMD規範的，那引入echarts將很簡單，使用一個符合AMD規範的模塊載入器，如esl.js，只需要配置好packages路徑指向src即可，你將享受到圖表的按需載入等最大的靈活性，由於echarts依賴底層zrender，你需要同時下載zrender到本地，可參考demo，你需要配置如下。

需要注意的是，包引入提供了開發階段最大的靈活性，但並不適合直接上線，減少請求的文件數量是前端性能優化中最基本但很重要的規則，務必在上線時做文件的連接壓縮。

//from echarts example

require.config({

packages: [

{

name: ‘echarts’,

location: ‘../../src’,

main: ‘echarts’

},

{

name: ‘zrender’,

location: ‘../../../zrender/src’, // zrender與echarts在同一級目錄

main: ‘zrender’

}

]

});

模塊化單文件引入（推薦）

如果你使用模塊化開發但並沒有自己的打包合併環境，或者說你不希望在你的項目里引入第三方庫的源文件，我們建議你使用單文件引入，同模塊化包引入一樣，你需要熟悉模塊化開發。

自2.1.8起，我們為echarts開發了專門的合併壓縮工具echarts-optimizer。如你所發現的，build文件夾下已經包含了由echarts-optimizer生成的單文件：

dist（文件夾） : 經過合併、壓縮的單文件

line.js : 折線圖（如需折柱動態類型切換，require時還需要echarts/chart/bar）

bar.js : 柱形圖（如需折柱動態類型切換，require時還需要echarts/chart/line）

scatter.js : 散點圖

k.js : K線圖

pie.js : 餅圖（如需餅漏斗圖動態類型切換，require時還需要echarts/chart/funnel）

radar.js : 雷達圖

map.js : 地圖

force.js : 力導向布局圖（如需力導和弦動態類型切換，require時還需要echarts/chart/chord）

chord.js : 和弦圖（如需力導和弦動態類型切換，require時還需要echarts/chart/force）

funnel.js : 漏斗圖（如需餅漏斗圖動態類型切換，require時還需要echarts/chart/pie）

gauge.js : 儀錶盤

eventRiver.js : 事件河流圖

treemap.js : 矩陣樹圖

venn.js : 韋恩圖

echarts.js : 這是包含AMD載入器的echarts主文件，需要通過script最先引入

chart（文件夾） : echarts-optimizer通過依賴關係分析同時去除與echarts.js的重複模塊後為echarts的每一個圖表類型單獨打包生成一個獨立文件，根據應用需求可實現圖表類型按需載入

source（文件夾） : 經過合併，但並沒有壓縮的單文件，內容同dist，可用於調試

採用單一文件使用例子見ECharts單一文件引入，存放在example/www下，首先你需要通過script標籤引入echarts主文件

//from echarts example

body

   div id=”main” style=”height:400px;”/div

   …

   script src=”./js/echarts.js”/script

/body

在主文件引入後你將獲得一個AMD環境，配置require.conifg如下：

//from echarts example

body

   div id=”main” style=”height:400px;”/div

   …

   script src=”./js/echarts.js”/script

   script type=”text/javascript”

       require.config({

           paths: {

               echarts: ‘./js/dist’

           }

       });

   /script

/body

require.config配置後就可以通過動態載入使用echarts

//from echarts example

body

   div id=”main” style=”height:400px;”/div

   …

   script src=”./js/echarts.js”/script

   script type=”text/javascript”

       require.config({

           paths: {

               echarts: ‘./js/dist’

           }

       });

       require(

           [

               ‘echarts’,

               ‘echarts/chart/line’,   // 按需載入所需圖表，如需動態類型切換功能，別忘了同時載入相應圖表

               ‘echarts/chart/bar’

           ],

           function (ec) {

               var myChart = ec.init(document.getElementById(‘main’));

               var option = {

                   …

               }

               myChart.setOption(option);

           }

       );

   /script

/body

總結來說，模塊化單文件引入ECharts，你需要如下4步：

為ECharts準備一個具備大小（寬高）的Dom（當然可以是動態生成的）

通過script標籤引入echarts主文件

為模塊載入器配置echarts的路徑，從當前頁面鏈接到echarts.js所在目錄，見上述說明

動態載入echarts及所需圖表然後在回調函數中開始使用（容我羅嗦一句，當你確保同一頁面已經載入過echarts，再使用時直接require(‘echarts’).init(dom)就行）

詳見入門教程 ( Getting started ) »

標籤式單文件引入

自1.3.5開始，ECharts提供標籤式引入。如果你的項目本身並不是基於模塊化開發的，或者是基於CMD規範（如使用的是seajs），那麼引入基於AMD模塊化的echarts可能並不方便，我們建議你採用srcipt標籤式引入，忘掉require。Srcipt標籤引入echarts後將可以直接使用兩個全局的命名空間：echarts，zrender，可參考ECharts標籤式引入，需要注意的是excanvas依賴body標籤插入Canvas節點去判斷Canvas的支持，如果你把引用echarts的script標籤放置head內在IE8-的瀏覽器中會出現報錯，解決的辦法就是把標籤移動到body內（後）。

標籤式引入環境中，常用模塊的引用可通過命名空間直取，同模塊化下的路徑結構，如：

echarts.config = require(‘echarts/config’)， zrender.tool.color = require(‘zrender/tool/color’)

//from echarts example

body

   div id=”main” style=”height:400px;”/div

   …

   script src=”example/www2/js/dist/echarts-all.js”/script

   script

       var myChart = echarts.init(document.getElementById(‘main’));

       var option = {

           …

       }

       myChart.setOption(option);

   /script

/body

K線圖(Candlestick chart)源處於日本德川幕府時代，被當時日本米市的商人用來記錄米市的行情與價格波動，後因其細膩獨到的標畫方式而被引入到股市及期貨市場。投資者可以根據K線的實體的陰陽，上下影線的長短等，來判斷多空雙方力量的對比和後市的走向。

一、K線的組成

K線圖由開盤價、收盤價、最高價和最低價組成。當開盤價比收盤價低，稱為收陽，這條K線稱為陽線，反之開盤價比收盤價高，就稱為陰線。

二、K線的基本分類

根據開盤價與收盤價的波動範圍，可將K線分為極陰、極陽，小陰、小陽，中陰中陽和大陰、大陽等線型。

它們一般的波動範圍如下：

極陰線和極陽線的波動範圍在0.5%左右;

小陰線和小陽線的波動範圍一般在0.6–1.5%;

中陰線和中陽線的波動範圍一般在1.6-3.5%;

大陰線和大陽線的波動範圍在3.6%以上。

K線圖可以說是東方哲學與西方統計學的完美結合，以陰陽之變表現出了多空雙方「勢」的相互轉換。然而，單一的K線僅能代表多空雙方一天之內戰鬥結果，不足以反映連續的市場變化，K線組合圖譜才可能更詳盡地表述多空雙方一段時間內「勢」的轉化——任何一方突破盤局獲得優勢後，都將形成一段上漲或下跌的行情。

在研究單根K線時，陰陽線的數量代表總體的多空趨勢，而K體的大小表示市場內在動力和趨勢的強弱，影線長短則反映出轉折意願;而研究K線組合圖譜，目的在於通過觀察多空勢力強弱盛衰的變化，感受雙方勢的轉化，順勢而為，尋找並參與蓄勢待發的底部，抱牢大勢所趨的上漲行情，規避強弩之末的頂部風險。

K線圖（Candlestick Charts）又稱蠟燭圖、日本線、陰陽線、棒線等，常用說法是「K線」，因其標畫方法具有獨到之處，人們把它引入股票市場價格走勢的分析中。 word製作K線圖方法如下： 1、打開」插入「選擇「圖表」。 2、在插入圖表窗口，根據自己的需…

ECharts，縮寫來自Enterprise Charts，商業級數據圖表，一個純Javascript的圖表庫，可以流暢的運行在PC和移動設備上，兼容當前絕大部分瀏覽器（IE6/7/8/9 /10/11，chrome，firefox，Safari等），底層依賴輕量級的Canvas類庫ZRender，提供直觀，生動，可交互，可高度個性 化定製的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫遊等特性大大增強了用戶體驗，賦予了用戶對數據進行挖掘、整合的能力。支持折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環形圖）、雷達圖（填充雷達圖）、和弦圖、力導向布局圖、地圖、儀錶 盤、漏斗圖、事件河流圖等12類圖表，同時提供標題，詳情氣泡、圖例、值域、數據區域、時間軸、工具箱等7個可交互組件，支持多圖表、組件的聯動和混搭展 現。模塊化單文件引入(推薦)1新建一個echarts.html文件，為ECharts準備一個具備大小(寬高)的Dom，2新建script標籤引入模塊化單文件echarts.js，3新建script標籤中為模塊載入器配置echarts和所需圖表的路徑(相對路徑為從當前頁面鏈接到echarts.js)，4script標籤內動態載入echarts和所需圖表，回調函數中可以初始化圖表並驅動圖表的生成，5瀏覽器中打開ecarts.html，就可以看到以下效果，：END標籤式單文件引入新建一個echarts.html文件，為ECharts準備一個具備大小(寬高)的Dom，新建script標籤引入echart-all.js，新建script，使用全局變數echarts初始化圖表並驅動圖表的生成，瀏覽器中打開echarts.html，可以看到如下效果，