2.11 API: چارٹ فنکشن کے استعمال کی سادہ مثالیں (گرافک فنکشن)

مصنف:چھوٹا سا خواب, تخلیق: 2016-12-27 16:39:31, تازہ کاری: 2017-10-11 10:22:22

API: چارٹ فنکشن کا استعمال کرنے کی ایک سادہ مثال


کچھ نئے طالب علموں کو چارٹ فنکشن کا استعمال کرتے ہوئے ڈیٹا دکھانے کے لئے ڈرائنگ گراف کا استعمال کرتے ہوئے بے چین محسوس ہوتا ہے۔ یہاں میں سب سے آسان مثال لکھتا ہوں ، جو آپ کے حوالہ کے لئے استعمال کرنا آسان ہے اور اس کی توسیع کرنا آسان ہے۔

  • کوڈ:

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);
    }
}
  • شامل کریں فنکشن: ObjChart.add (([0، [nowTime، buy1Price]]) ؛
    مندرجہ بالا تحریر چارٹ میں ایک ڈیٹا شامل کرنے کے لئے ہے، یعنی ایک نقطہ؛ جیسے:


    img

    ObjChart.add (([0، [nowTime، buy1Price، -1]) ؛ اس طرح لکھنا آخری نقطہ کو اپ ڈیٹ کرنا ہے۔ صرف اپ ڈیٹ کرنا ، کوئی نیا نقطہ شامل نہیں کرنا ، لہذا چارٹ ہمیشہ اس طرح چلتا ہے:


    img


مزید

گزلیانگجیانہوامیں نے گوگل براؤزر میں ٹیسٹ کیا، جیسے چارٹ کو ریئل ٹائم میں ریفریش نہیں کیا جائے گا، اسے دستی طور پر براؤزر کو ریفریش کرنے کی ضرورت ہوگی تاکہ نئے کاروبار شامل کیے جا سکیں، اور مجھے نہیں معلوم کہ اسے خود بخود ریل ٹائم میں کیسے ریفریش کیا جائے۔

شاندیانلیوکیا آپ ایک ہی وقت میں دو تصاویر شامل کر سکتے ہیں؟

چھوٹا سا خوابکیا اعداد و شمار کو شامل کرنے کا طریقہ استعمال کیا گیا ہے؟ ObjChart.update ((chart) ؛ فنکشن کالز تازہ ہوجائیں گی ، جب تک کہ آپ براہ راست چارٹ کی تشکیل کے اعتراض کے چارٹ میں سیریز ڈیٹا سیریز میں ترمیم نہ کریں۔ اس کے علاوہ ، آپ کو اپنے آپ کو ایک بار پھر تازہ دم کرنے کی ضرورت ہے۔

بوڑھی بلی مچھلی کھاتی ہےیہ ایک سے زیادہ ٹیبلز ڈرائنگ ہے، کیا آپ گرافک بھی کر سکتے ہیں؟

چھوٹا سا خوابجب آپ JSON.stringify () فنکشن کو بھیجتے ہیں تو [table1، table2] بھیجیں ، اور یہ ٹھیک ہے ، API دستاویزات میں مثالیں ہیں۔

بوڑھی بلی مچھلی کھاتی ہےبراہ مہربانی، میں کس طرح ایک کثیر تصویر صفحہ بندی ٹیب ظاہر کرنے کے لئے؟ اور کیا آپ اپنے آپ کو div شامل کر سکتے ہیں؟

شاندیانلیوٹھیک ہے، میں سمجھ گیا، شکریہ

چھوٹا سا خواباس کے ساتھ ساتھ آپ چارٹ کو صفحہ بندی کی شکل میں بھی دکھا سکتے ہیں جیسے: https://dn-filebox.qbox.me/4bbeb1ad63919280561fb2b1ad90fa7573f87c77.png آپ دیکھ سکتے ہیں کہ پیکیج گراف ، فرق گراف ، وغیرہ۔ ایک ہی وقت میں دکھایا گیا ہے۔ ابھی تک لاگو نہیں ہوا ہے۔