Highcharts 绘制线而不是面积答案

【问题标题】：Highcharts plotting line instead of areaHighcharts 绘制线而不是面积
【发布时间】：2016-08-23 20:46:22
【问题描述】：

我正在尝试highcharts 演示文档中的highcharts-ng。

我想绘制面积图，但是当我运行它时，面积并没有出现，而只是线条。

以下是代码示例。

HTML：

<highchart id="chart1" config="chartConfig"></highchart>

角度控制器

$scope.chartConfig = {
    chart: {
        type: 'area',
        spacingBottom: 30
    },
    title: {
        text: 'Fruit consumption *'
    },
    subtitle: {
        text: '* Jane\'s banana consumption is unknown',
        floating: true,
        align: 'right',
        verticalAlign: 'bottom',
        y: 15
    },
    legend: {
        layout: 'vertical',
        align: 'left',
        verticalAlign: 'top',
        x: 150,
        y: 100,
        floating: true,
        borderWidth: 1,
        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
    },
    xAxis: {
        categories: ['Apples', 'Pears', 'Oranges', 'Bananas', 'Grapes', 'Plums', 'Strawberries', 'Raspberries']
    },
    yAxis: {
        title: {
            text: 'Y-Axis'
        },
        labels: {
            formatter: function () {
                return this.value;
            }
        }
    },
    tooltip: {
        formatter: function () {
            return '<b>' + this.series.name + '</b><br/>' +
                this.x + ': ' + this.y;
        }
    },
    plotOptions: {
        area: {
            fillOpacity: 0.5
        }
    },
    credits: {
        enabled: false
    },
    series: [{
        name: 'John',
        data: [0, 1, 4, 4, 5, 2, 3, 7]
    }, {
        name: 'Jane',
        data: [1, 0, 3, null, 3, 1, 2, 1]
    }]
};

文档页面上可用的可视化是：

而我在计算机上呈现的图表是：

【问题讨论】：

标签： angularjs highcharts highcharts-ng

【解决方案1】：

highcharts-ng 配置对象与 highcharts 对象并不完全相同。见https://github.com/pablojim/highcharts-ng

为什么我的绘图选项/工具提示/向下钻取/其他功能不起作用？ 提交的所有问题中至少有一半是由此引起的。在提交问题之前，请阅读此内容！一个常见的错误是将其他 Highcharts 选项直接放入 chartConfig。一般来说，如果您想要的 Highcharts 选项未在上面列出，您可能希望将其放在 chartConfig.options 中。

因此，要更改图表类型（不是列出的 Highcharts 选项之一），您将使用 options 成员变量。

   options: {
      //This is the Main Highcharts chart config. Any Highchart options are valid here.
      //will be overriden by values specified below.
      chart: {
        type: 'area',
        spacingBottom: 30
      }
    },

http://jsfiddle.net/Cp73s/5198/

【讨论】：