结合图表类型规格+列高图

时间:2017-05-30 07:45:58

标签: highcharts

我尝试同时放置一个量表和一个列,但我不能。

他的命运是一个错误:

  

VM453 highcharts.js:319 Uncaught TypeError:无法读取属性' length'未定义的

感谢您的帮助。

Highcharts.chart('container', {
  title: {
    text: false
  },
  pane: [{
    startAngle: -90,
    endAngle: 90,
    background: null

  }],
  tooltip: {
    enabled: false
  },
  xAxis: {
    categories: [
      'U.s. Stocks',
      'Foreign Stocks',
      'Emerging Markets',
      'Dividend Stocks',
      'Natural Resources',
      'Municipal Bonds'
    ]
  },
  yAxis: [{
    min: 0,
    max: 10,
    minorTickInterval: 'auto',
    minorTickWidth: 1,
    minorTickLength: 0,
    minorGridLineWidth: 0,
    minorTickColor: '#666',
    tickInterval: 1,
    tickWidth: 2,
    tickPosition: 'inside',
    tickLength: 10,
    tickColor: '#666',
    labels: {
      rotation: 'auto',
      distance: -20
    }
  }
  ],
  plotOptions: {
    gauge: {
      dataLabels: {
        enabled: false
      },
      dial: {
        radius: '100%'
      },
      height: 200,
      width: 200,
      margin: 0
    },
    column: {
      pointPadding: -0.2,
      borderWidth: 0,
      stacking: 'normal',
      dataLabels: {
        enabled: true,
        color: 'white',
        verticalAlign: 'bottom',
        backgroundColor: 'rgba(0,0,0,0.3)',
        format: '{y} %',
        padding: 5,
        shadow: false,
      },
      colors: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9',
        '#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1']
    }
  },
  credits: {
    enabled: false
  },

  series: [{
    type: 'gauge',
    name: 'Channel A',
    data: [3],
    dial: {
      radius: '60%',
      baseWidth: 4,
      baseLength: '95%',
      rearLength: 0
    }
  }, {
    type: 'column',
    data: [
      {y: 35,
        color: '#ff6200'
      },
      {y: 25,
        color: '#ff7900'
      },
      {y: 19,
        color: '#ff9f44'
      },
      {y: 10,
        color: '#ffb478'
      },
      {y: 5,
        color: '#8ec883'
      },
      {y: 6,
        color: '#009fd4'
      }
    ]}]
});

Jsfiddle.net link

0 个答案:

没有答案