2.11 API: Ejemplos sencillos de uso de la función Chart (función gráfica)

El autor:Un sueño pequeño., Creado: 2016-12-27 16:39:31, Actualizado: 2017-10-11 10:22:22

API: Ejemplos sencillos de uso de la función Chart


Algunos nuevos estudiantes se sienten a gusto cuando usan la función Chart para mostrar datos. Aquí tengo el ejemplo más simple para que todos lo utilicen como referencia y fácil de ampliar.

  • El código es:

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);
    }
}
  • La función de añadir: ObjChart.add (([0, [nowTime, buy1Price]])); ObjChart.add ([0], [nowTime, buy1Price]]) es una aplicación de gráficos de gráficos de objetos que se encuentra en el sitio web de ObjChart.add.
    Lo que se escribe arriba es añadir un dato, un punto, a un gráfico.


    img

    ObjChart.add (([0, [nowTime, buy1Price], -1])); ObjChart.add es una aplicación de gráficos de gráficos de objetos que se puede utilizar para obtener gráficos de objetos. Así se actualiza el último punto. Sólo se actualiza, no se añade nuevo punto, por lo que el gráfico siempre funciona así:


    img


Más.

Gzliangjianhua fue el primero.He probado en Google Browser, como si el gráfico no se refrescara en tiempo real, necesitaba refrescar manualmente el navegador para añadir nuevos mercados, y no sabía cómo hacer que se refrescara automáticamente en tiempo real.

Shandyanliyu¿Puedo añadir dos cuadros al mismo tiempo?

Un sueño pequeño.¿Los datos se agregan con el método de Add? ObjChart.update ((chart); las llamadas de funciones se actualizan, a menos que haya modificado directamente la serie de datos de la serie de datos de la configuración de objetos de gráfico. En la actualidad, la mayoría de los usuarios de Twitter no tienen acceso a la red social, y no tienen acceso a las redes sociales.

El viejo gato ama el pescado.Es un dibujo de varias tablas, ¿puedes dibujar un diagrama?

Un sueño pequeño.Cuando se carga la función JSON.stringify (), se carga [table1, table2], así que está bien, hay ejemplos en la documentación de la API.

El viejo gato ama el pescado.Por favor, ¿cómo se muestra una pestaña dividida por varias imágenes? Además, ¿puedo añadir una div?

ShandyanliyuEstá bien, lo entiendo, gracias.

Un sueño pequeño.También se puede mostrar el gráfico en forma de páginas divididas, por ejemplo: https://dn-filebox.qbox.me/4bbeb1ad63919280561fb2b1ad90fa7573f87c77.png Se puede ver un diagrama de pastel, un diagrama de diferencias (diagrama de curvas) etc. También se muestra que no se ha implementado por el momento.