Question

我必须用两个系列填充图表：时间序列区域和列。两个系列都填充了日期Date值和irregualr间隔，我需要保持区域系列的xAxis上的值，同时reprsenting bot系列。这是代码：

Highcharts.setOptions({
  lang: {
        months: ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno',  'Luglio',
        'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre'],
        weekdays: ['Lunedì', 'Martedì', 'Martedì', 'Giovedì', 'Venerdì', 'Sabato', 'Domenica'],
    shortMonths: ['Gen', 'Feb', 'Mar', 'Apr', 'Mag', 'Giu',
          'Lug', 'Ago', 'Set', 'Ott', 'Nov', 'Dic'],
    downloadJPEG : "Scarica come JPEG",
    downloadPDF: "Scarica come PDF",
    downloadPNG: "Scarica come PNG",
    downloadSVG: "Scarica come SVG",
    printChart: "Stampa grafico",
    contextButtonTitle: "Opzioni"
    }
});
$(function () {
    $('#chart1').highcharts({
    chart: {
        zoomType: 'x',
        spacingRight: 20
    },
    title: {
        text: 'Entrate/Uscite'
    },
    subtitle: {
        text: document.ontouchstart === undefined ?
        'Click and drag in the plot area to zoom in' :
        'Pinch the chart to zoom in'
    },
    xAxis: {
        type: 'datetime',
        title: {
        text: null
        }
        //tickInterval: 31 * 24 * 3600 * 1000
    },
    yAxis: {
        title: {
        text: 'Euro(€)'
        }
    },
    tooltip: {
        shared: true
    },
    legend: {
        enabled: true
    },
    plotOptions: {
        area: {
        fillColor: {
            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
            stops: [
            [0, Highcharts.getOptions().colors[9]],
            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
            ]
        },
        //lineWidth: 1,
        marker: {
            enabled: false
        },
        shadow: false,
        states: {
            hover: {
            lineWidth: 1
            }
        },
        threshold: null
        }
    },
    series: [

        {
        type: 'column',
        name: "Entrate mensili",
        pointStart: Date.UTC(2014, 0, 01),
        data: [[Date.UTC(2014, 0, 31), 4830.55], [Date.UTC(2014, 1, 28), 8429.28], 
              [Date.UTC(2014, 2, 31), 515.6], ]

        },
        {
        type: 'area',
        name: "Entrate",
        pointInterval: 24 * 3600 * 1000,
        pointStart: Date.UTC(2014, 0, 01),
        data: [[Date.UTC(2014, 0, 9), 494.8], [Date.UTC(2014, 0, 20), 137.2], [Date.UTC(2014, 0, 22), 210.0], 
              [Date.UTC(2014, 0, 23), 220.4], [Date.UTC(2014, 0, 24), 871.0], [Date.UTC(2014, 0, 28), 420.0], 
              [Date.UTC(2014, 0, 30), 420.0], [Date.UTC(2014, 0, 31), 2057.15], [Date.UTC(2014, 1, 5), 191.2], 
              [Date.UTC(2014, 1, 6), 81.6], [Date.UTC(2014, 1, 7), 295.2], [Date.UTC(2014, 1, 11), 135.12], 
              [Date.UTC(2014, 1, 12), 189.2], [Date.UTC(2014, 1, 13), 210.0], [Date.UTC(2014, 1, 14), 315.2], 
              [Date.UTC(2014, 1, 17), 462.8], [Date.UTC(2014, 1, 18), 544.4], [Date.UTC(2014, 1, 19), 715.44], 
              [Date.UTC(2014, 1, 20), 971.2], [Date.UTC(2014, 1, 21), 418.0], [Date.UTC(2014, 1, 24), 1122.0], 
              [Date.UTC(2014, 1, 25), 151.76], [Date.UTC(2014, 1, 26), 851.12], [Date.UTC(2014, 1, 27), 670.8], 
              [Date.UTC(2014, 1, 28), 1104.24], [Date.UTC(2014, 2, 3), 305.6], [Date.UTC(2014, 2, 6), 210.0], ]
        }
    ]
    });
});

似乎列系列搞乱了图表。这是jsfiddle上的代码。如果我注释掉列系列，我会得到预期的行为：我需要用第一个（区域）的时间间隔来表示两个系列。

有什么建议吗？

HighCharts - 同一图表上的时间序列区域和列系列 - x轴上的不规则日期时间

0 个答案: