使用 Highchart 的面积样条图

Question

我正在使用Jquery Flot 绘制我的图表，现在我想将一个特定的传递给Highchart。

这是我使用 Jquery Flot 的图表

var data1 = [
    [gd(2014, 1, 1), 4], [gd(2014, 2, 1), 8], [gd(2014, 3, 1), 4], [gd(2014, 4, 1), 10],
    [gd(2014, 5, 1), 4], [gd(2014, 6, 1), 16], [gd(2014, 7, 1), 15]];    

var data2 = [
    [gd(2013, 1, 1), 3], [gd(2013, 2, 1), 5], [gd(2013, 3, 1), 3], [gd(2013, 4, 1), 11],
    [gd(2013, 5, 5), 4], [gd(2013, 6, 1), 13], [gd(2013, 7, 1), 9], [gd(2013, 8, 1), 5],
    [gd(2013, 9, 1), 2], [gd(2013, 10, 1), 3], [gd(2013, 11, 1), 2], [gd(2013, 12, 1), 1]];

var data2014 = {
    label: "Receitas 2014",
    data: data1,
    xaxis: 1
};
var data2013 = {
    label: "Receitas 2013",
    data: data2,
    xaxis: 2
};

$("#flot-dashboard-chart").length && $.plot($("#flot-dashboard-chart"), [
    data2014, data2013
],
        {
            series: {
                lines: {
                    show: false,
                    fill: true
                },
                splines: {
                    show: true,
                    tension: 0.4,
                    lineWidth: 1,
                    fill: 0.4
                },
                points: {
                    radius: 2,
                    show: true
                },
                shadowSize: 2
            },
            grid: {
                hoverable: true,
                clickable: true,
                tickColor: "#d5d5d5",
                borderWidth: 1,
                color: '#d5d5d5'
            },
            colors: ["#1ab394", "#464f88"],
            xaxes: [{
                mode: "time",
                tickSize: [1, "month"],
                tickLength: null,
                colors: ["#838383", "#838383"],
                timeformat: "%b",
                max: (new Date("2014/12/1")).getTime()
            }, {
                ticks: false
            }],
            yaxis: {
                ticks: 4
            },
            legend: {
                backgroundOpacity: 0.5,
                noColumns: 1,
                position: "nw",
                color: "#000000 !important",
            }
        }
);

function gd(year, month, day) {
    return new Date(year, month - 1, day).getTime();
}

我正在尝试将此图表转换为 highchart，但我有点困惑，因为在 highchart 中 spline 是一种类型，而在 Jquery Flot 中是一个选项。

我做了多远

var data1 = [
    [gd(2014, 1, 1), 4], [gd(2014, 2, 1), 8], [gd(2014, 3, 1), 4], [gd(2014, 4, 1), 10],
    [gd(2014, 5, 1), 4], [gd(2014, 6, 1), 16], [gd(2014, 7, 1), 15]];    

var data2 = [
    [gd(2013, 1, 1), 3], [gd(2013, 2, 1), 5], [gd(2013, 3, 1), 3], [gd(2013, 4, 1), 11],
    [gd(2013, 5, 5), 4], [gd(2013, 6, 1), 13], [gd(2013, 7, 1), 9], [gd(2013, 8, 1), 5],
    [gd(2013, 9, 1), 2], [gd(2013, 10, 1), 3], [gd(2013, 11, 1), 2], [gd(2013, 12, 1), 1]];

$('#flot-dashboard-chart').highcharts('StockChart', {

            rangeSelector: {
                inputEnabled: $('#flot-dashboard-chart').width() > 480,
                selected: 1
            },

            title: {
                text: 'AAPL Stock Price'
            },

            colors: ['#1ab394'],

            plotOptions: {
                area: {
                    color: '#1ab394',
                    fillColor: '#1ab394'
                }
            },

            series: [{
                name: 'AAPL Stock Price',
                data: data1,                    
                type: 'areaspline',
                threshold: null,
                tooltip: {
                    valueDecimals: 2
                },
                fillColor: {
                    linearGradient: {
                        x1: 0,
                        y1: 0,
                        x2: 0,
                        y2: 1
                    },
                    stops: [
                        [0, Highcharts.getOptions().colors[0]],
                        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                    ]
                }
            }]
        });

function gd(year, month, day) {
    return new Date(year, month - 1, day).getTime();
}

但结果却大不相同。我正在阅读API 以获取更多信息，但有些选项位于不同的位置。

有人可以帮我用 highchart 绘制图表吗？

更新

我越来越近了

代码

$(function () {

    var data1 = [
        [gd(2014, 1, 1), 4], [gd(2014, 2, 1), 8], [gd(2014, 3, 1), 4], [gd(2014, 4, 1), 10],
        [gd(2014, 5, 1), 4], [gd(2014, 6, 1), 16], [gd(2014, 7, 1), 15]];

    var data2 = [
        [gd(2013, 1, 1), 3], [gd(2013, 2, 1), 5], [gd(2013, 3, 1), 3], [gd(2013, 4, 1), 11],
        [gd(2013, 5, 5), 4], [gd(2013, 6, 1), 13], [gd(2013, 7, 1), 9], [gd(2013, 8, 1), 5],
        [gd(2013, 9, 1), 2], [gd(2013, 10, 1), 3], [gd(2013, 11, 1), 2], [gd(2013, 12, 1), 1]];

    $('#container').highcharts({
        chart: {
            type: 'areaspline'
        },
        title: {
            text: 'Average fruit consumption during one week'
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            verticalAlign: 'top',
            x: 150,
            y: 100,
            floating: true,
            borderWidth: 1,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
        },
        xAxis: {
            categories: [
                'Monday',
                'Tuesday',
                'Wednesday',
                'Thursday',
                'Friday',
                'Saturday',
                'Sunday'
            ],
            plotBands: [{ // visualize the weekend
                from: 4.5,
                to: 6.5,
                color: 'rgba(68, 170, 213, .2)'
            }]
        },
        yAxis: {
            title: {
                text: 'Fruit units'
            }
        },
        tooltip: {
            shared: true,
            valueSuffix: ' units'
        },
        credits: {
            enabled: false
        },
        colors: ['#1ab394', '#464f88'],
        plotOptions: {
            areaspline: {                        
                fillOpacity: 0.4
            }
        },
        series: [{
            name: 'Receitas 2014',
            data: [[1, 4], [2, 8], [3, 4], [4, 10], [5, 4], [6, 16], [7, 15]]
        }, {
            name: 'Receitas 2013',
            data: [[1, 3], [2, 5], [3, 3], [4, 11], [5, 4], [6, 13], [7, 9], [8, 5], [9, 2], [10, 3], [11, 2], [12, 1]]
        }]
    });
});

function gd(year, month, day) {
    return new Date(year, month - 1, day).getTime();
}

Answer 1

为什么不直接将xAxis 的categories 设置为包含月份的数组，如下所示：

 xAxis: {
   categories:  ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'] 
 }

然后使用简单的数组设置数据：

var data1 = [4,8,4,10,4,16,15];
var data2 = [3,5,3,11,4,13,9,5,2,3,2,1];

也许这不是你需要的，但看看结果，告诉我你的想法：http://jsfiddle.net/yohanrobert/T3Dpf/1/

编辑

如果您仍想在 data 数组中使用日期，您可以创建一个 xAxis 并将 type 设置为 'datetime' 用于第一个系列，如下所示：

{
  type: 'datetime',
  dateTimeLabelFormats: {
    month: '%b' // Display months as labels ( 'Jan', 'Feb', ...)
  },
  showLastLabel: false, // If not set to false, displays 'Jan' at the end of the xAxis
  tickInterval: 24 * 3600 * 1000 * 30.4 // Displays tick for each month
}

然后为每个新系列添加一个隐藏的xAxis：

{
  type: 'datetime',
  labels: {
    enabled: false // Remove the label 
  },
  tickWidth: 0, // Remove the ticks
  lineWidth: 0 // Remove the axis line
}

最后，您需要为这些系列从 1 月到 12 月设置 extremes。
以下是三个系列的示例：http://jsfiddle.net/yohanrobert/T3Dpf/3/

不过，这可能不是最简单的方法。