实施水平条形图

Question

我是一个新手。我已经有了一个条形图组件，并且在整个项目的多个地方都在使用该组件。现在，我想通过修改该条形图组件来实现水平条形图，但是我目前仍处于困境，无法继续前进。没有错误，下面的代码实现了正常的条形图。在此先感谢

条形图组件

 dataCtx: any;
  bar_chart: any;

  @ViewChild('barChart') barChartRef: ElementRef;
  @Input() data = [];
  @Input() type: string;
  @Input() hoverData: Array<string>;
  @Input() yLabel: any;
  @Input() xLabel: any;
  @Input() label?: string;
  @Input() barLabel?: string;
  @Input() nameObj?: any;
  @Input() showLabel: boolean;
  @Input() charType: string;

  color = [];
  @Output() onSegClick = new EventEmitter<any>();





  colors: Array<string> = ["rgba(98, 228, 98, 1)", "rgba(248, 227, 117, 1)", "rgba(250, 99,131, 1)", 'red', 'blue', 'violet', 'orange'];

  constructor() { }

  ngOnInit() {

  }

  ngAfterViewInit() {
    this.renderChart();
  }

  ngOnChanges() {
    if (this.barChartRef)
      this.renderChart();
  }

  renderChart() {
    let self = this;
    this.dataCtx = this.barChartRef.nativeElement.getContext('2d');
    let gradient_1 = this.dataCtx.createLinearGradient(0, 0, 0, 250);
    gradient_1.addColorStop(0, ' #c4743e');
    gradient_1.addColorStop(1, 'transparent');

    let gradient_2 = this.dataCtx.createLinearGradient(0, 0, 0, 250);
    gradient_2.addColorStop(0, 'beige');
    gradient_2.addColorStop(1, 'transparent');

    let gradient_3 = this.dataCtx.createLinearGradient(0, 0, 0, 250);
    gradient_3.addColorStop(0, '#2f7ca7');
    gradient_3.addColorStop(1, "transparent");
    this.bar_chart = new Chart(this.dataCtx, {
      type: this.charType || 'bar',
      data: {
        labels: this.nameObj.map(obj => obj.name),
        datasets: this.setChartData()
      },
      options: {
        legend: {
          display: this.showLabel,
          labels: {
            padding: 20,
            fontStyle: 'bold',
            fontSize: 16,
          }
        },
        title: {
          display: this.label ? true : false,
          text: this.label,
          fontStyle: 'bold',
          fontSize: 20,
        },
        showAllTooltips: true,
        toolTips: {
          mode: 'index',
          intersect: true
        },
        scales: {
          xAxes: [{
            categoryPercentage: 0.65,
            // barPercentage: 1.0,
            // barThickness: 50,
            maxBarThickness: 50,
            display: true,
            scaleLabel: {
              display: true,
              fontStyle: 'bold',
              labelString: this.yLabel
            },
            ticks: {
              autoSkip: false
            },
            gridLines: {
              color: 'rgba(88, 88, 88, 0.35)',
              lineWidth: 2.5
            }
          }],
          yAxes: [{
            // stacked: true,
            display: true,
            scaleLabel: {
              display: true,
              fontStyle: 'bold',
              labelString: this.xLabel
            },
            ticks: {
              min: 0,
              max: 100,
            },
            gridLines: {
              color: 'rgba(0, 78, 162, 0.5)',
              lineWidth: 0.5
            }
          }]
        },
        responsive: true,
        onClick: function (evt, arr) {
          if (arr[0]) {
            self.onSegClick.emit(arr[0]._index);
          }
        },
      }
    });

  }


  cohortProf(options) {
    let cohortData = [{
      data: this.data.map(coh => Math.floor(coh.proficiency * 100)),
      backgroundColor: '#0080FF',
      options
    }]
    return cohortData;

  }


  testData() {
    let testData = [];
    this.data.forEach((d, i) => {
      let val = Math.floor(d.data * 100);
      testData.push(val);
      this.color.push('#' + (Math.random() * 0xFFFFFF << 0).toString(16));
      // this.color.push('hsl('+ val +', 100%, 50%)')
    });
    return testData;
  }

  testProf(options) {
    let testData = [{
      data: this.testData(),
      backgroundColor: this.color,
      options
    }]
    return testData;
  }

  subjectProf(options) {
    let subData = [];
    let strat = this.hoverData;
    this.data.filter((d, index) => { subData.push({ "data": d, "backgroundColor": this.colors[index], options, label: strat[index] }) });
    return subData;
  }

  setChartData() {
    let dataSet: any;
    let fixed_options = {
      borderColor: 'tranparent',
      borderWidth: 2,
      pointBorderColor: 'transparent',
      pointBackgroundColor: 'transparent',
      pointHoverBackgroundColor: "#fff",
      pointHighlightFill: "#fff",
      pointRadius: 3,
      pointHitRadius: 20,
      pointBorderWidth: 1,
    };
    switch (this.type) {
      case 'test': {
        dataSet = this.testProf(fixed_options);
        break;
      }
      case 'cohort': {
        dataSet = this.cohortProf(fixed_options);
        break;
      }
      case 'grouped-chart': {
        dataSet = this.subjectProf(fixed_options);
        break;
      }

      case 'single-bar': {
        dataSet = [{
          data: this.data,
          backgroundColor: this.colors,
          label: 'Analytics'
        }];
        break;
      }
      default: {
        break;
      }
    }
    return dataSet;
  }
}

重复使用同一组件来实现水平条形图

horizantalChart = {
    data:[[10,20],[30,40]]
  }

 <bar-chart  [type]="'single-bar'" [hoverData]="['Experts Avg. Score', 'Others Avg. Score']" barLabel="Proficiency"
  [data]="horizontalChart.data" [nameObj]="uploadAnalytics.analytics" yLabel="Quizzes" chartType="horizontalBar"
          [xLabel]="'Average Upload Score'" [showLabel]="true" (onSegClick)="selectBar($event)"></bar-chart>

代码的输出看起来像这样

Answer 1

在renderChart组件的bar-chart方法内，当前按如下方式创建图表：

this.bar_chart = new Chart(this.dataCtx, {
  type: 'bar',
  ...

这将始终创建垂直条形图。为了考虑由@Input()装饰器提供的类型，应将其重写如下。

this.bar_chart = new Chart(this.dataCtx, {
  type: this.type,
  ...

然后this.bar_chart可能不再是一个适当的名称，应该进行修改，以避免将来造成误解。