Question

我在海图中使用堆积的酒吧。我无法在代码中看到条形图。谁能帮我..？

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Cricket Stars</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/modules/exporting.js"></script>
  <script src="https://code.highcharts.com/modules/export-data.js"></script>
</head>
<body>
  <app-playerstats></app-playerstats>
</body>
</html>

playerstats.html

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

playerstats.component.html

import { Component, OnInit } from '@angular/core';
declare var $: any;
declare var Highcharts: any;
@Component({
  selector: 'app-player-stats',
  templateUrl: './player-stats.component.html',
  styleUrls: ['./player-stats.component.css']
})

export class PlayerStatsComponent implements OnInit {
  constructor() { }

  ngOnInit() {
    //bating charts
    Highcharts.chart('container', {
      chart: {
        type: 'bar',
        fontFamily: 'arial',
        color: "#ffffff"
      },
      credits: {
        enabled: false
    },
      tooltip: { enabled: false },
      exporting: {
        enabled: false
      },
      title: {
        text: ''
        // enabled: false
      },
      xAxis: {
        categories: ['MAT', 'RUNS', 'SR', 'AVG', 'HS', 'NO'],
        lineColor: '#ffffff',
        lineWidth: 2,
        labels: {
          style: {
             color: '#ffffff',
             font: '11px sans-serif',
             fontWeight:'bold'
          }
       }
      },
      yAxis: {
        min: 0,
        max: 1000,
        lineColor: '#ffffff',
        lineWidth: 2,
        startOnTick: false,
        endOnTick: false,
        tickPositions: [],
        title: {
          // text: 'Total fruit consumption'
          enabled: false
        },
      },
      legend: {
        reversed: true,
        symbolRadius: 0,
        align: "center",
        // contentAlign:"left"
      },
      plotOptions: {
        series: {
          stacking: 'normal',
          // pointPadding: 10,
          // groupPadding: 10,
        },
        bar: {
          pointWidth: 38,
          dataLabels: {
            enabled: true
          }
        }
      },
      series: [{
        name: 'Player stats',
        data: [1000, 786, 900, 889, 787, 956],
        color: 'red'

      }, {
        name: 'Topper Stats',
        data: [450, 564, 400, 100, 450, 77],
        color:'green'
      }]
    });
  }
}

高图上没有出现条形图？

0 个答案: