【问题标题】:HighCharts - Creating a Scatter with datetimeHighCharts - 使用日期时间创建散点图
【发布时间】:2015-05-10 07:41:43
【问题描述】:

我想创建一个以日期时间为 xAxis 的散点图,我设法做到了,但 x 间隔是天,我很难做到 x 间隔是分钟。

我的 JS:

function startDashboard3DScatter() {
    $.getJSON('/Handlers/MainHandler.ashx?op=getNetwork', function (data) {
        Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function (color) {
            return {
                radialGradient: {
                    cx: 0.4,
                    cy: 0.3,
                    r: 0.5
                },
                stops: [
                    [0, color],
                    [1, Highcharts.Color(color).brighten(-0.2).get('rgb')]
                ]
            };
        });
        // Set up the chart
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'networkAlerts',
                margin: 100,
                type: 'scatter',
                width: 600,
                height: 300,
                options3d: {
                    enabled: true,
                    alpha: 10,
                    beta: 30,
                    depth: 250,
                    viewDistance: 5,

                    frame: {
                        bottom: { size: 1, color: 'rgba(0,0,0,0.02)' },
                        back: { size: 1, color: 'rgba(0,0,0,0.04)' },
                        side: { size: 1, color: 'rgba(0,0,0,0.06)' }
                    }
                }
            },
            title: {
                text: 'Network'
            },
            plotOptions: {
                scatter: {
                    width: 100,
                    height: 100,
                    depth: 20
                },
                series: {
                    marker: {
                        lineWidth: 1
                    }
                }
            },
            yAxis: {
                min: 0,
                title: { text: 'Risk Score' }
            },
            xAxis: {
                min: 0,
                max: 6,
                gridLineWidth: 1,
                title: { text: 'Time line' },
                labels: {
                    formatter: function () {
                        var date = new Date();
                        date.setDate(date.getDate() - this.value);
                        return date.toDateFormat();// this.value + ' %';
                    }
                }
            },
            zAxis: {
                min: 0,
                max: 10
            },
            legend: {
                enabled: false
            },
            series: data
        });
    });
};

我的 get 请求的数据响应 =

data = 
[ 
    {"name":"name1", "id":"D/1", "color": "#55BF3B", "data": [[6, 100]]},
    {"name":"name2", "id":"D/5", "color": "#55BF3B", "data": [[3, 1]]}
]

数据是['今天之前的几天,yValue']

所以我已经这样做了,我在今天前几天发送并格式化 xAxis,正如我所说的问题是这些点的间隔为 1 天,我想使其间隔为 1 分钟或 1 小时。

任何想法,我都坚持了好几天。

【问题讨论】:

    标签: javascript datetime highcharts


    【解决方案1】:

    好吧,毕竟解决方案并不难:

    改变:

    labels: {
        formatter: function () { 
            var date = new Date(new Date().getTime() - (this.value * 60 * 60 * 1000));
            return date.toDateFormat();
        }
    }
    

    并且在服务器代码中返回小时而不是天,它可以工作。

    【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2015-02-12
    • 2014-01-16
    • 1970-01-01
    • 2021-03-21
    • 1970-01-01
    • 2023-01-28
    • 2019-05-31
    • 2011-11-01
    相关资源
    最近更新 更多