高品质渲染问题 - 来自不同图表的系列在同一图表中呈现

时间：2013-04-29 22:58:56

标签： google-chrome firefox safari highcharts highstock


我正在使用Highstock + Highchart-more来绘制div中AVG温度的折线图和另一个div中的windrose。 我在Chrome，Safari和Firefox中有一些奇怪的行为：
问题n.1：[已解决，请看下面我自己的答案]
Chrome和Safari
当我第一次加载页面时，我得到温度图表的Highstock导航器从没有数据的日期开始，在图表的最左边部分，我看到windrose系列：
{{0 }}


将导航器拖动到图表后，从有效的开始日期开始或重新加载图表，每次扫描都很好：
enter image description here

这种奇怪的事情在Firefox中不会发生。

问题n.2
[仍然没有解决] Chrome，Safari，Firefox 调整窗口大小时，图表会以X和Y的比例变化并变为：
enter image description here

我真的找不到麻烦的地方......

我通过对php控制器的ajax调用获取我的数据源并将它们作为Json传递并使用自定义包装器呈现图表。

这是我使用的JS自定义库（其他这些：

function createTempChartTable(tempChartContainer, tempChartDataSource, tempTableJSVar, TempTableDataSource, reload, chartType, dates) {
seriesCounter = 0;
serieSrc = [];
jQuery.each(names, function(i, name) {
    jQuery.get(tempChartDataSource + dates[0] + '/' + dates[1] + '/' + name, function(
            data) {
        jQuery.each(data['data'], function(i, values) {
            serieSrc[seriesCounter] = {
                name : name,
                data : values
            }
        });
        seriesCounter++;
        if (seriesCounter == names.length) {
            createChart(tempChartContainer, serieSrc);
            if (reload)
            tempoTableJSVar.fnReloadAjax(tempoTableDataSource + dates[0] + '/' + dates[1] + '/');
        }
    });
});

} 

function createChart(chartContainer, serieSrc) {
Highcharts.setOptions({
lang: {
months: ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre'],
weekdays: ['Domenica', 'Lunedì', 'Martedì', 'Mercoledì', 'Giovedì', 'Venerdì', 'Sabato'],
shortMonths : [ 'Gen', 'Feb', 'Mar', 'Apr', 'Mag', 'Giu', 'Lug', 'Ago', 'Set', 'Ott', 'Nov', 'Dec' ]
}
});
chartTempH24 = new Highcharts.StockChart({
    chart: { renderTo: chartContainer,  zoomType: 'x' },
    rangeSelector : {
            buttons : [{ type : 'hour', count : 1, text : '1h'  },
                       { type : 'day', count : 1, text : '1D'   },
                       { type : 'all', count : 1, text : 'All'  }
                      ],
            selected : 2
    },
    series:  serieSrc
    });

} 

function createWindChartTable(chartContainer,chartDataSource, tableJSVar, tableDataSource, reload, chartType, dates) {
// dati dei venti
directionCounter = 0;
serieString ='';
serieSrc = [];
jQuery.get(chartDataSource + from + '/' + to + '/' + venti[0] + '/'
        + venti[1], function(data) {
    jQuery.each(data['data'], function(grado, indexArr) {

        for (i=0;i<indexArr.lenght;i++)
            indexArr[i] = Number(indexArr[i].toFixed(1));


        serieSrc[directionCounter] = {
            name : grado,
            data : indexArr
        }

        directionCounter++;
        if (directionCounter == BeaufortDegrees) {
            createWindRose(chartContainer, chartType, serieSrc);

            if(reload)
                tableJSVar.fnReloadAjax(tableDataSource + dates[0] + '/' + dates[1]+ '/');
        }
    });
});

} 

function createWindRose(chartContainer, chartType, serieSrc){

chartVh24 = new Highcharts.Chart({      
    chart: { polar: true, type: chartType, renderTo : chartContainer },             
    legend: { reversed: true, align: 'right', verticalAlign: 'top', y: 100, layout: 'vertical' },
    xAxis: {
        categories: ['N','NNE','NE','ENE', 'E','ESE','SE','SSE','S','SSW','SW','WSW','W','WNW','NW','NNW'],
        labels:{rotation: 'auto'}
    },
    yAxis: {

    },
    tooltip: { followPointer: true },
    plotOptions:{
        series: { stacking: 'normal', shadow: false, groupPadding: 0, pointPlacement: 'on' }
    },
    series: serieSrc.reverse()
});

}

谢谢你的帮助！ 洛伦佐

编辑：
TempChartSerie =
serieSrc per Temperature [{name: 'min10_AirTC_Avg',data:[1359558300000,,1364405400000,98.871,1364405401000,-8.74335,1364410800000,98.226,1364410801000,-9.33595,1364416200000,97.718,1364416201000,-9.56538,1364421600000,97.312,1364421601000,-9.90062,1364427000000,97.054,1364427001000,-10.2689,1364432400000,96.77,1364432401000,-10.6219,1364437800000,96.625,1364437801000,-10.3702,1364443200000,95.922,1364443201000,-11.0126,1364448600000,91.254,1364448601000,-7.29045,1364454000000,79.84,1364454001000,-3.75038,1364459400000,81.826,1364459401000,-4.95188,1364464800000,90.082,1364464801000,-4.02362,1364470200000,89.332,1364470201000,-4.85343,1364475600000,96.914,1364475601000,-5.66058,1364481000000,98.228,1364481001000,-5.90878,1364486400000,98.535,1364486401000,-6.61818,1364491800000,98.824,1364491801000,-6.48165,1364497200000,99.189,1364497201000,-6.08515,1364502600000,99.64,1364502601000,-5.45207,1364508000000,99.882,1364508001000,-5.21893,1364513400000,99.998,1364513401000,-4.797,1364518800000,99.998,1364518801000,-4.04547,1364524200000,99.998,1364524201000,-3.8185,1364529600000,99.998,1364529601000,-3.68492,1364535000000,99.998,1364535001000,-3.57873,1364540400000,99.586,1364540401000,-1.41212,1364545800000,97.688,1364545801000,0.718517,1364551200000,97.262,1364551201000,0.8715,1364556600000,97.136,1364556601000,-1.56103,1364562000000,98.609,1364562001000,-2.03847,1364567400000,99.402,1364567401000,-3.77712,1364572800000,99.998,1364572801000,-4.68402,1364578200000,99.998,136457...1000,-6.16965,1365568200000,85.764,1365568201000,-5.29423,1365573600000,75.254,1365573601000,-4.50132,1365579000000,72.617,1365579001000,-3.35802,1365584400000,72.974,1365584401000,-2.72162,1365589800000,73.707,1365589801000,-2.12643,1365595200000,77.027,1365595201000,-1.42703,1365600600000,78.816,1365600601000,-2.75922,1365606000000,83.602,1365606001000,-3.42327,1365611400000,87.216,1365611401000,-3.92763,1365616800000,88.4,1365616801000,-3.97052,1365622200000,95.654,1365622201000,-5.09757,1365627600000,87.703,1365627601000,-4.07203,1365633000000,92.338,1365633001000,-4.0868,1365638400000,92.02,1365638401000,-4.05112,1365643800000,96.738,1365643801000,-4.26392,1365649200000,90.718,1365649201000,-3.71972,1365654600000,89.904,1365654601000,-3.59263,1365660000000,88.238,1365660001000,-0.99675,1365665400000,81.021,1365665401000,0.3062,1365670800000,79.652,1365670801000,1.5795,1365676200000,91.468,1365676201000,3.55297,1365681600000,92.688,1365681601000,1.28492,1365687000000,94.199,1365687001000,0.3689,1365692400000,99.998,1365692401000,-2.29203,1365697800000,99.998,1365697801000,-2.28558,1365703200000,99.998,1365703201000,-2.1486,1365708600000,99.998,1365708601000,-2.28017,1365714000000,99.998,1365714001000,-1.9244,1365719400000,99.998,1365719401000,-2.02197,1365724800000,99.998,1365724801000,-2.01222,1365730200000,99.998,1365730201000,-1.7501,1365735600000,99.998,1365735601000,-1.77687,1365741000000,99.998,1365741001000,-1.10027,1365746400000,99.998,1365746401000,-0.8805]} ]

windRose serie：

`[{name: 'BF0',data:[3.2,0,0,0,0.4,0,0.2,0,0.2,0,0,0,0,0,0,0]},
{name: 'BF1',data:[7,1.2,1.4,1.4,0.8,0.4,1,1.2,0.2,1,0,0.2,0,0.8,0.6,0.6]},
{name: 'BF2',data:[25.4,5.2,2.4,1.8,0,0,0,2.4,1,0.6,0.4,0.2,0.2,0.2,0.2,1.2]},
{name: 'BF3',data:[14.6,4.4,3,0.6,0,0,0,0.6,0.8,0,0,0.2,0.8,0.4,0,0.2]},
{name: 'BF4',data:[4.8,1.2,0.8,0,0.2,0,0,0.2,0,0,0,1,0.4,0,0,0]},
{name: 'BF5',data:[2,0.4,0,0,0,0,0,0,0,0,0,0,0.4,0,0,0]},
{name: 'BF6',data:[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]},
{name: 'BF7',data:[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]},
{name: 'BF8',data:[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]},
{name: 'BF9',data:[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]},
{name: 'BF10',data:[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]},
{name: 'BF11',data:[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]},
{name: 'BF12',data:[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]}
]`

正如我在评论中写的那样，系列现在很好地分开（这是一个错误的JS变量范围导致冲突）但是，在'ALL'缩放设置中，值似乎是'自动平均'并且显示与任何数据都不匹配的值。在“1天”和“1小时”缩放中，数据值很好。
我还检查PHP，因为只有在将数据视为匿名用户时才会发生此缩放问题（上面粘贴的注意数据系列是用于呈现匿名用户图表的数据系列）。
在Temp serie上有一个NULL值作为数组的第二个元素，这不会影响其他图表...

1 个答案:

答案 0 :(得分：0)

抱歉，我误以为JS变量范围。
很抱歉打扰而不考虑之前。

在我的自定义库中，我使用全局变量而不是本地变量。 让它们成为当地人解决了第一个问题
第二个问题就是数据分组...对我感到羞耻！ 希望这个Q＆amp; A可以帮助别人像我一样愚蠢：D
干杯！

相关问题
最新问题