Highcharts繪製線而不是區域

我正在嘗試highcharts演示文稿中的highcharts-ng。Highcharts繪製線而不是區域

我想繪製面積圖，但是當我運行它時，面積不會出現，只是線條。

以下是代碼示例。

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

文檔頁面上可用的可視化：

而我呈現在我的電腦上的圖表是：

來源

2016-08-23 Rusty

的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/

來源

2016-08-23 23:44:53

感謝。現在我明白這是如何工作的。 – Rusty

Highcharts繪製線而不是區域

回答

相關問題