highcharts histrogram与日期

时间:2017-11-08 20:10:46

标签: date highcharts histogram

我有一个多维数组,结构如下:[[year,month,day,value],[year2,month2,day2,value2],[year3,month3,day3,value3]...]。每个值都是整数。我想建立一个Highcharts直方图:在xAxis中有YEARS,在yAx是MONTHS。现在,在列中我希望得到该年的VALUES总和(例如:2009年的列,其中所有值的总和为2009年)。在标记中,我想拥有它们 根据当年的月份分配(例如:在第2009列中,左侧为第1个月的标记,该列右侧为第12个月,其他列也为第12个月)。

是否可以使用此类图表?非常感谢。

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/histogram-bellcurve.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
 <script>
 $(document).ready(function() {
 var data = [[2014,1,10,3],[2014,2,3,9],[2013,12,4,7],[2012,3,6,7],[2009,8,5,9],[2010,11,31,5],[2016,1,1,3],[2011,12,13,9],[2016,2,14,7],[2017,5,29,6],[2008,8,15,4],[2013,11,31,5]];
Highcharts.setOptions({
    colors: ['green', 'blue', 'yellow', 'orange', 'red', 'violet', 'pink', 'brown', 'black']
});
$(function () {
        Highcharts.chart('prova',{
                title: {
                    text: 'Distribuzione articoli'
                },
                xAxis: [{
                    title: { text: 'Anno' },
                    min: 2009,
                    max: 2017,
                    type: 'category'
                    }, {
                    title: { text: 'Mese' },
                    opposite: true,
                }],
                yAxis: [{
                    title: { text: 'Giorno' },
                    min: 0,
                    max: 12,
                    labels: {
                        step: 1,
                    }
                }, {
                    title: { text: 'Sequenza temporale' },
                    opposite: true,
                }],
                series: [{
                     name: 'Sequenza temporale',
                     type: 'histogram',
                     xAxis: 1,
                     yAxis: 1,
                     baseSeries: 's1',
                     zIndex: -1
                }, {
                    name: 'Articoli',
                    type: 'scatter',
                    data: data,
                    id: 's1',
                    marker: {
                        radius: 1.5
                    }
                }]
        })
})
})
</script>
<div id="prova" height="400px" width="800px"></div> 

0 个答案:

没有答案