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查询加载数据。感谢下面的One，他给了我改变数据进入方式的想法，而不是一旦到达就改变它。

新代码如下所示：

        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);

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

enter image description here

希望将来能帮助其他人。

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;})});

dataY = {name：“pump”，数据：秒 } 与仪表时间相同，绘制为Y轴。

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

1 个答案: