javascript - highcharts:Y 轴为 1 或 0 的图表

Question

我们有一些 PC 和 IP 摄像机正在工作，我编写了一个 python 脚本来检查所有机器是否正常运行并通过 ping 来检查它们。如果机器运行，结果将为 1，如果机器关闭，结果将为 0。脚本使用当前时间编写它。

有两个表。

1. 设备:保留设备 ID、名称、IP 等
2. ping:保留 Ping 结果。

该脚本从设备表中获取设备的 IP 地址和 ID，对其进行 ping 操作，并将结果写入 ping 表。这是代码(我知道它是翠绿的):

# -*- coding: utf-8 -*-
import subprocess, sys
from time import sleep
try:
    import MySQLdb
except:
    print "Please Install Python's MySQLdb library"
    sys.exit(0)
class bcolors:
    HEADER = '\033[95m'
    OKBLUE = '\033[94m'
    OKGREEN = '\033[92m'
    WARNING = '\033[93m'
    FAIL = '\033[91m'
    ENDC = '\033[0m'

def cprint(txt, typ):
    print "%s%s%s" %(typ, txt, bcolors.ENDC)

def ping(hname, verbose=False):
    response = p = subprocess.Popen(["ping", "-c1", hname], stdout=subprocess.PIPE)
    res = response.communicate()[0]
    if not "100% packet loss" in res:
        if verbose:
            cprint("The Host is up.", bcolors.OKGREEN)
        return True
    else:
        if verbose:
            cprint("The Host is down.", bcolors.FAIL)
        return False
#code starts here:
try:
    db = MySQLdb.connect(host="<The Host>", user="<user name for sql>", passwd="<password for sql>", db="<database name>", charset="utf8")
    cur = db.cursor()
    cur.execute("SELECT * FROM devices")
    for row in cur.fetchall() :
        devID = row[0]
        devIP = row[3]
        if ping(devIP):
            cur.execute("""INSERT INTO ping (id, date, status) VALUES (%s, DEFAULT, %s)""",(devID, 1))
        else:
            cur.execute("""INSERT INTO ping (id, date, status) VALUES (%s, DEFAULT, %s)""",(devID, 0))
    db.commit()
    db.close()
except:
    cprint("No MySQL connection." bcolors.FAIL)

它每 10 分钟与 crontab 一起工作。

所以我们这里有数据，我想将其放入图表中并决定使用 highcharts。

通过线图，我得到所有结果的平均线。(一和零)

使用条形图，我得到了所有结果总和的巨大条形图。(一个和零)

您可以建议我什么样的图表以及如何绘制它。就像我希望有一种方法可以绘制它:

y 轴:向上或向下

x 轴:时间。

我想要绘制的数据如下所示:

[Date.UTC(2014, 09, 10, 22, 50, 11), 0], [Date.UTC(2014, 09, 10, 22, 40, 11), 0]

Answer 1

有几个选项是柱形图或阶梯折线图。

$(function () {
    $('#container').highcharts({
        xAxis: {
            type: 'datetime'
        },
        yAxis: {
            min:0,
            max:1,
            tickInterval: 1
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            type: 'line',
            step: true,
//            type: 'column',
            data: [[Date.UTC(2014, 09, 10, 22, 50, 11), 0],
                  [Date.UTC(2014, 09, 11, 22, 50, 11), 1],
                   [Date.UTC(2014, 09, 12, 22, 50, 11), 0],
                  [Date.UTC(2014, 09, 13, 22, 50, 11), 1],
                  [Date.UTC(2014, 09, 14, 22, 50, 11), 1]]
        }]
    });
});

http://jsfiddle.net/tabrthca/1/