Highcharts 绘制线而不是区域

Question

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

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

以下是代码示例。

HTML:

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

Angular 控制器

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

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

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

Answer 1

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

为什么我的情节 options/tooltip/drilldown/other 功能不起作用？ 提交的所有问题中至少有一半是由于此引起的。在你提交问题之前阅读这个！一个常见的错误是将其他 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/

Highcharts 绘制线而不是区域

Highcharts plotting line instead of area

highcharts

angularjs

highcharts-ng