Highcharts折线图不适合所有类别的数据

时间:2017-09-01 18:19:14

标签: highcharts angular2-highcharts

Highcharts似乎创建了不属于类别的数字。有没有办法自动调整数据以适应类别。

this.options = {
            chart: {
            type: 'line'
    },
    title: {
        text: 'Line Test Chart'
    },
    subtitle: {
        text: ''
    },
    xAxis: {
        categories: [2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017],
        crosshair: true
    },
    yAxis: {
      stackLabels: { enabled: true}
    },
    tooltip: {
             headerFormat: '<b>{point.x}</b><br/>',
             pointFormat: '{series.name}: {point.y}'
            },
    plotOptions: {
        column: {
          stacking: 'normal',
           grouping: false,
          dataLabels: {enabled: true},
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [{
        name: 'Construction--Spending Non-Residential',
        data: [100, 99, 98, 99, 99, 100, 99, 97, 98, 99, 100, 99, 97, 99, 98, 99]
            },{
        name: 'Construction--Spending Residential',
        data: [100, 98, 99, 97, 96, 98, 100, 97, 98, 96, 98, 97, 98, 100, 98, 97]
            }]
        };
    }
    options: Object;

请参阅: Plunker Example

图片我想要实现的示例:  Image Link

1 个答案:

答案 0 :(得分:0)

会发生这种情况,因为在您的情况下,您有更多的点,类别数组中定义的类别和pointInterval相等1.例如,您可以将xAxis类型更改为“datetime”并设置不同的pointInterval (例如6个月)但是由您决定如何安排数据。

API参考:
http://api.highcharts.com/highcharts/xAxis.type
http://api.highcharts.com/highcharts/plotOptions.series.pointStart
http://api.highcharts.com/highcharts/plotOptions.series.pointInterval

例:
https://plnkr.co/edit/KBDyCQsEPXNc3GUtUukr?p=preview