使用带有分钟、秒和毫秒的 Highcharts 作为数据不起作用

Question

我正在尝试绘制 1000 米的图表运行，数据是通过 mySQL 数据库提供的，并带有 MeterTime 和 urDate。 urDate 在 x 轴上，y 轴应保持秒数。但是图表要么什么都不画，要么什么都画在零线上。

我知道我需要更改图表解释时间的方式，但只提供分钟、秒和毫秒。不确定如何转换它。

有人在 jsfiddle 上看到并检查我可能做错了什么吗？



    var chart;

    var data = [{"urDate":"2015-03-04","urTime":"00:02:05","MeterTime":"00:15:534250"},{"urDate":"2015-03-06","urTime":"00:02:25","MeterTime":"00:18:019730"}];

    var options = {
        chart: {
            backgroundColor: '#34495e',
            plotBackgroundColor: '#2b3c50',
            renderTo: 'container',
            type: 'line'
        },
        title: {
            text: '',
            x: -20 //center
        },
        subtitle: {
            text: '',
            x: -20
        },
        xAxis: {
            categories: []
        },
        yAxis: {
            title: {
                name: 'Time'
            },
            type: 'datetime',

            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },


        series: []
    };

    var dataXAxis = [],
        dataSeries = [{
            data: []
        }];
    data.forEach(function (va) {
        dataXAxis.push(formatDate(va.urDate));
        dataSeries[0].data.push(formatDate(va.MeterTime));

    });
    // And assign the correct format to highcharts
    options.xAxis.categories = dataXAxis;
    options.series = dataSeries;

    // create the first chart
    chart = new Highcharts.Chart(options);

    function formatDate(d) {
        d = new Date(d);

        var month = d.getMonth();
        var day = d.getDate();
        month = month + 1;

        month = month + "";

        if (month.length == 1)
        {
            month = "0" + month;
        }

        day = day + "";

        if (day.length == 1)
        {
            day = "0" + day;
        }

        return (day + '-' + month + '-' + d.getFullYear());
    }

更新

我已经更改了 jsfiddle 以包括现在如何从 mySQL 查询加载数据。感谢下面的一位，他给了我改变数据进入方式的想法，而不是在数据到达后改变它。

新代码如下所示：

        var options = {
            chart: {
                backgroundColor: '#34495e',
                plotBackgroundColor: '#2b3c50',
                renderTo: 'container',
                type: 'line'
            },
            title: {
                text: '',
                x: -20 //center
            },
            subtitle: {
                text: '',
                x: -20
            },
            xAxis: {
                categories: []
            },
            yAxis: {
                title: {
                    name: 'Seconds'
                },
                //type: 'datatime', //y-axis will be in milliseconds

                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },


            series: []
        };

        var dataXAxis = [], dataSeries = [{data: []}];
        data.forEach(function (va) {
            dataXAxis.push(formatDate(va.urDate));
            console.log('t ' + va.MeterTime);
            dataSeries[0].data.push(parseInt(va.MeterTime));
        })
// And assign the correct format to highcharts
        options.xAxis.categories = dataXAxis;
        options.series = dataSeries;
        options.yAxis.title.text = 'Seconds';

// create the first chart
        chart = new Highcharts.Chart(options);

    });

主要区别在于数据的输入方式：

[{"urDate":"2015-03-04","MeterTime":"15.5343"},{"urDate":"2015-03-06","MeterTime":"18.0197"}]

这来自 mySQL 如下所示的查询：

$isql = "SELECT urDate, time_to_sec(urTime) / (urMiles / 0.00062137) * 1000 AS MeterTime FROM results WHERE uid = " . $_POST['uid'] . " ORDER BY urDate ASC;";

        $ires = $mysqli->query($isql);

        while ($irow = $ires->fetch_array(MYSQLI_ASSOC)) {

           $data_result['userChart'][] = $irow;
        }

      echo json_encode($data_result);

最终的结果，除了一些更好的样式，是这样的：

希望这对以后的其他人有所帮助。

Answer 1

将毫秒绘制为 Y 轴。 http://jsfiddle.net/kjjn6tn3/3/

secondd = _.map(data , function (v) {return _.reduce(_.map(_.zip(_.map(v['urTime'].split(":"), function(v) {return parseInt(v);}), [60*60,60,1]), function (value , key) {return value[0]*value[1];}), function (x ,y ){ return x+y;})});

数据Y = { 姓名："pump"，数据：秒 }

你可以用仪表时间做同样的事情并绘制为 Y 轴。

使用带有分钟、秒和毫秒的 Highcharts 作为数据不起作用

Using Highcharts with minutes, seconds and milliseconds as Data not working

javascript

time

datetime

highcharts