Highcharts 中文社区

 找回密码
 立即注册
查看: 497|回复: 0

[JS 数据处理] 动态获取后台数据加载后,图上的点变透明了

[复制链接]

该用户从未签到

1

主题

1

帖子

22

积分

HC 新手

Rank: 1

积分
22
发表于 2017-12-27 14:36:13 | 显示全部楼层 |阅读模式
本帖最后由 铭铭 于 2017-12-27 15:31 编辑

现象是动态渲染成功但是图上的点的样式会随机在地N个点之后多了个fill-opacity: 0.25;的样式,导致看上去点都消失了,但是线还在,图在最后,求大神指导,很急呢

我的js代码如下Highcharts.setOptions({
    global: {
        useUTC: false
    }
});

function requestData() {
    $.ajax({
        url: 'http://localhost/mqtt/examples/get_mqtt_data.php',
        dataType: 'JSONP',
        jsonp: "callback",
        type: "GET",
        success: function(point) {
            //console.log(point);
            var xTime = point.time.toString();
            var series = chart.series[0];
            shift = series.data.length > 20; // 图中显示数据点的个数
            var time_arr = xTime.split(",");
            //console.log(typeof(time_arr));
            console.log(point);
            console.log(Date.UTC(time_arr[0], time_arr[1], time_arr[2], time_arr[3], time_arr[4], time_arr[5]));
            console.log(typeof(Date.UTC(time_arr[0], time_arr[1], time_arr[2], time_arr[3], time_arr[4], time_arr[5])));
            console.log(point.vibration1);
            console.log(typeof(point.vibration1));
            var xValue=Date.UTC(time_arr[0], time_arr[1], time_arr[2], time_arr[3], time_arr[4], time_arr[5]);
            chart.series[0].addPoint([xValue, parseInt(point.vibration1)], true, shift);
            chart.series[1].addPoint([xValue, parseInt(point.balance1)], true, shift);
            //series[0].xAxis.categories[] = xTime;
            setTimeout(requestData, 5000); //每5秒调用一次  
        },
        error: function(jqXHR) {
            alert("发生错误" + jqXHR.status);
        },
        cache: false
    });
}

$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            //defaultSeriesType: 'spline',
            //type: 'spline',
            // animation: Highcharts.svg, // don't animate in old IE
            events: {
                load: requestData
            }
        },
        marker: {
            enabled: true
            //radius: 10
        },
        title: {
            text: 'cloud端实时数据',
            x: -20
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150, //针对不同数据类型的坐标轴有不同的默认值。对于线性数据和Datetime类型数据,其默认值是tickPixelInterval值
            //minRange: 0,
            //allowDecimals:false,
            //tickLength: 20, //坐标轴刻度线的长度
            //pointInterval:2//x轴的刻度间隔
        },
        yAxis: {
            //minPadding: 0.2,
            //maxPadding: 0.2,
            //alternateGridColor: '#FDFFD5',//相邻刻度线之间区分颜色
            title: {
                text: '数值',
                //margin: 80
            }
        },
        tooltip: {
            formatter: function() {

                return Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + this.series.name + '数值是:' + this.y;
            }
        },
        //数据列
        series: [{
                name: 'vibration1',
                data: [],

            },
            {
                name: 'balance1',
                data: []
            }
        ]
    });
});
6G%{AOEIL[`JTWH}SLXK$]O.png
QWK4$A@K$65Y56@DRF350XH.png
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐上一条 /1 下一条

快速回复 返回顶部 返回列表