简体   繁体   English

Highcharts列适合/在图表上调整

[英]Highcharts column fit/adjust on chart

I write because I go back to being stuck in a problem with Highcharts. 我写这封信是因为我回到了陷入Highcharts问题的困境。 I have a monthly chart that works fine except for one thing. 我有一个月度图表,除了一件事以外,都可以正常工作。 The zoom level. 缩放级别。 The X axis is always shown me a value of 0 (today), so that the zoom level is incorrect. X轴始终显示为0(今天),因此缩放级别不正确。 I am attaching a picture to try to explain it better. 我附上一张图片,试图更好地解释它。 I need this column set in the graph. 我需要在图表中设置此列。 I appreciate your help! 我感谢您的帮助! Thank you! 谢谢!

The json returned by PHP is (correct results): PHP返回的json是(正确结果):

{"data":[[1401580800000,2],[1400025600000,0],[1400025600000,0],[1400025600000,0],[1400025600000,0],[1400025600000,0],[1400025600000,0],[1400025600000,0],[1400025600000,0],[1400025600000,0],[1400025600000,0],[1400025600000,0],[1400025600000,0],[1400025600000,0],[1400025600000,0],[1400025600000,0],[1400025600000,0],[1400025600000,0],[1400025600000,0],[1400025600000,0],[1400025600000,0],[1400025600000,0],[1400025600000,0],[1400025600000,0],[1400025600000,0],[1400025600000,0],[1400025600000,0],[1400025600000,0],[1400025600000,0],[1400025600000,0]]}

And Javascript file: 和Javascript文件:

chart = new Highcharts.Chart({
chart: {
    renderTo: 'divStatsGrupo',
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false
    },
    title: {
    text: tituloMes
    },

    tooltip: {
            formatter: function() {
            return Highcharts.dateFormat('%d/%m/%Y',new Date(this.x)) + '<br/>' +'Alarmas: ' + this.y                               
            }   
        },      
    xAxis: {    
    type: 'datetime',
    dateTimeLabelFormats : {
    day: '%e. %b',
    labels: {
        style: {
            width: '200px','min-width': '100px'
                    },
        useHTML : true, 

                }
                }   
            },

yAxis: {
title: {
    text: 'Total alarmas'
    },
    allowDecimals: false,
    min: 0
    },

     series : [{
    showInLegend: false,   
            name : 'Grafica Mensual',
            type : 'column',
            data: data.data,    
    dataLabels: {
                enabled: true,
                rotation: 0,
                color: '#000000',
                align: 'center',
                y: 0,
                style: {
                    fontSize: '14px',
                    fontFamily: 'Verdana, sans-serif',
                }} 
                }]
        });
}); ///cierra get 

EDIT: I need a graphic for month (user select), but, the white area and Xaxis only appers info for the month selected. 编辑:我需要一个月的图形(用户选择),但是,白色区域和Xaxis仅显示所选月份的信息。 The PHP file return a correct JSON chain, but highcharts not fit the columns fine. PHP文件返回正确的JSON链,但是highcharts不能很好地适应列。 Sorry for my english! 对不起我的英语不好!

在此处输入图片说明

The problem is with your JSON, where you have duplicated values for the same timestamp. 问题出在您的JSON上,在该JSON中,相同的时间戳记有重复的值。 Just remove them. 只需删除它们。

Then! 然后! You have unsorted data, it should be sorted ascending by timestamp. 您有未排序的数据,应按时间戳升序对其进行排序。

After fixed, it works fine, see: http://jsfiddle.net/4nCx3/ 修复后,它可以正常工作,请参阅: http : //jsfiddle.net/4nCx3/

var data = {
    "data": [
        [1400025600000, 0],
        [1401580800000, 2]
    ]
};

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM