Javascript 使用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();
}

但结果却大不相同。我正在阅读更多信息，但有些选项在不同的地方

有人能帮我用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();
}

我快到了

代码

$(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();
}

---

为什么不将

xAxis

的

类别设置为包含月份的数组，如下所示：

 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];

也许这不是你需要的，但看看结果，告诉我你的想法：

编辑

如果您仍然希望在
数据
数组中使用日期，您可以为第一个系列创建
xAxis
，并将
类型
设置为
'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月。

以下是三个系列的示例：

这可能不是最简单的方法。
现在你能解释一下哪里错了/遗漏了什么吗？@Sebastian Bochan the Xaxis，我预计这个月会出现在那里，但我没有使用数据集，我习惯性地把数据放在那里。我想使用数据集，但没有打印。您可以使用datetime类型的图表来代替Categoris。@Sebastian Bochan在您发表评论后，我去highcharts文档研究它，是的，这也是一个选项，可能是最简单的类别。您的示例很有效，但是如果我需要这一年，我应该如何编辑你的代码？你需要这一年的具体内容是什么？在一个比较图表中思考，其中绿线是我今年的可租性，紫色线是2013年的可租性。就像我的数据集
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数据2=[[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]，[gd（2013,11,1），2]我编辑了我的答案；）尽管如此，我认为您可以使用我的第一个答案，从
data1
和
data2
变量中提取序列数据。