2.11 API: Chart 함수를 사용하는 간단한 예 (그림 기능)

저자:작은 꿈, 2016-12-27 16:39:31, 업데이트: 2017-10-11 10:22:22

API: Chart 함수를 사용하는 간단한 예 (그림 기능)


새로운 학생들이 차트 함수를 사용하여 데이터를 표시하는 데 무섭게 느껴질 때, 여기 가장 간단한 예제를 작성했습니다.

  • 코드:

var chart = { // 这个 chart 在JS 语言中 是对象, 在使用Chart 函数之前我们需要声明一个配置图表的对象变量chart。
    __isStock: true,                                    // 标记是否为一般图表,有兴趣的可以改成 false 运行看看。
    tooltip: {xDateFormat: '%Y-%m-%d %H:%M:%S, %A'},    // 缩放工具
    title : { text : '差价分析图'},                       // 标题
    rangeSelector: {                                    // 选择范围
        buttons:  [{type: 'hour',count: 1, text: '1h'}, {type: 'hour',count: 3, text: '3h'}, {type: 'hour', count: 8, text: '8h'}, {type: 'all',text: 'All'}],
        selected: 0,
        inputEnabled: false
    },
    xAxis: { type: 'datetime'},                         // 坐标轴横轴 即:x轴, 当前设置的类型是 :时间
    yAxis : {                                           // 坐标轴纵轴 即:y轴, 默认数值随数据大小调整。
        title: {text: '差价'},                           // 标题
        opposite: false,                                // 是否启用右边纵轴
    },
    series : [                                          // 数据系列,该属性保存的是 各个 数据系列(线, K线图, 标签等..)
        {name : "line1", id : "线1,buy1Price", data : []},  // 索引为0, data 数组内存放的是该索引系列的 数据
        {name : "line2", id : "线2,lastPrice", dashStyle : 'shortdash', data : []}, // 索引为1,设置了dashStyle : 'shortdash' 即:设置 虚线。
    ]
};
function main(){
    var ObjChart = Chart(chart);  // 调用 Chart 函数,初始化 图表。
    ObjChart.reset();             // 清空
    while(true){
        var nowTime = new Date().getTime();   // 获取本次轮询的 时间戳,  即一个 毫秒 的时间戳。用来确定写入到图表的X轴的位置。
        var ticker = _C(exchange.GetTicker);  // 获取行情数据
        var buy1Price = ticker.Buy;           // 从行情数据的返回值取得 买一价
        var lastPrice = ticker.Last + 1;      // 取得最后成交价,为了2条线不重合在一起 ,我们加1
        ObjChart.add([0, [nowTime, buy1Price]]); // 用时间戳作为X值, 买一价 作为Y值 传入 索引0 的数据序列。
        ObjChart.add([1, [nowTime, lastPrice]]); // 同上。
        ObjChart.update(chart);                  // 更新图表以显示出来。
        Sleep(2000);
    }
}
  • 더함수: [0], [nowTime, buy1Price]]);
    위의 글은 그래프에 데이터를 추가하는 것입니다.


    img

    [0, [nowTime, buy1Price], -1]); 이렇게 쓰면 마지막 점을 업데이트하는 것입니다. 그냥 업데이트하는 것, 새로운 점을 추가하지 않는 것, 그래서 그래프는 항상 이렇게 동작합니다:


    img


더 많은

즈리랑기안후아저는 구글 브라우저에서 테스트를 했습니다. 그래프가 실시간으로 갱신되지 않는 것처럼, 새로운 시장을 추가하기 위해 브라우저를 수동으로 갱신해야 합니다.

산디안리유이 사진들을 한 번에 두 장 더할 수 있나요?

작은 꿈이 자료는 추가 방식으로 추가되었나요? ObjChart.update ((chart); 그래프 구성 객체 charts 안의 series 데이터 시리즈를 직접 수정하지 않는 한 함수 호출이 새로워집니다. 이 글은 한 번 더 읽어보도록 하겠습니다.

늙은 고양이는 물고기를 좋아한다.이것은 여러 개의 표를 그리는 것입니다.

작은 꿈JSON.stringify (() 함수를 입력할 때 [table1, table2]를 입력하면 됩니다.

늙은 고양이는 물고기를 좋아한다.여러 개의 탭을 어떻게 표시해야 할까요? 아니면 직접 div을 추가할 수 있나요?

산디안리유좋아요, 알았어요, 감사합니다.

작은 꿈그래프를 페이지 분할 형태로 표시할 수 있습니다. 예를 들어: https://dn-filebox.qbox.me/4bbeb1ad63919280561fb2b1ad90fa7573f87c77.png 파크 그래프, 차이 그래프 (선 그래프) 등을 볼 수 있습니다. 동시에 표시되는 것은 아직 구현되지 않았습니다.