如何在Angular中使用自定义比例绘制ng2-charts水平条形图？

Posted 2023-03-16

【中文标题】如何在Angular中使用自定义比例绘制ng2-charts水平条形图？

【英文标题】：How to draw ng2-charts horizontal bar chart with custom scales in Angular?

【发布时间】：2022-01-01 02:19:18

【问题描述】：

我正在尝试使用如下 ng2-charts 的水平条形图来绘制自定义比例，即

这是我到目前为止所取得的成就，我得到的输出为

代码：

  public barChartColors: any [] =[
    
      backgroundColor:'#5081bd',
    ,
    
      backgroundColor:'rgba(80,129,189,255)',
    
];

  public barChartOptions1: ChartOptions = 
    responsive: true,
    scales: 
      yAxes: [
       
        display: true,
        scaleLabel: 
         display: true,
         labelString: "",
         fontSize: 20
        ,
       ,
      ]
    
  



public barChartType1: ChartType = "horizontalBar";

DesignHorizantalBarChart(chartdata: any) 
    
    let dataobj = ;
    let setData = [];
    let setLabels = [];
    let arr = [];
    chartdata.forEach((element, index) => 

      element.index = index;

      if (!element.isOpenText) 
        setLabels = [...element.responses];
        let average = ((element.average * element.responses.length) / 100);


        setData.push(average.toFixed(2));
        
        dataobj = 
          data: setData,
          label: element.reportTitle,
          stack: element.reportTitle,
        ;

        arr.push(dataobj);
        this.barChartDataSets1.push(arr);
        this.barChartLabels1.push(setLabels);

        arr = [];
        setData = [];
        setLabels = [];
      
    );

  

从函数参数输入 JSON 数据：

[
   
      "guid":"bb3cbb02-c0e7-440c-bd44-5c2bc25a249c",
      "questionTitle":"Custom Question 2",
      "reportTitle":"first report",
      "responses":[
         "ans1",
         "ans2"
      ],
      "openText":[
         
      ],
      "isOpenText":false,
      "result":null,
      "average":66.66666666666666,
      "sampleSize":3
   
]

准备数据后为图表输入 Feed：

barChartDataSets1 [["data":["1.33"],"label":"first report","stack":"first report"]]
generate-report.component.ts:290 barChartLabels1 [["ans1","ans2"]]

模板：

                    <canvas baseChart   
                        [colors]="barChartColors" 
                        [datasets]="barChartDataSets1[customdata.index]"
                        [labels]="barChartLabels1[customdata.index]" 
                        [options]="barChartOptions1" 
                        [chartType]="barChartType1" 
                        (chartHover)="chartHovered($event)" 
                        (chartClick)="chartClicked($event)">
                    </canvas>

我想翻转刻度并显示在所需的输出图像中，而不翻转数据或类似的东西。如何做到这一点？任何帮助将不胜感激。

【参考方案1】：

使用它可以完成工作：

public barChartOptions1: ChartOptions = 
  responsive: true,
  scales: 
    x: 
      min: 0,
      max: 4
    
  

您也可以只设置其中一个，并在x 轴和y 轴上设置。

【讨论】：

我会测试它。

您能否使用上述输入进行详细说明。我无法理解。

通过像上面一样提供x，我收到错误消息，指出Object literal may only specify known properties, and 'x' does not exist in type 'ChartScales | LinearScale | LogarithmicScale | TimeScale'.ts(2322)。我尝试将其更改为xAxes，这消除了x 的错误，但在min 上给出了错误，指出xAxes 对象上不存在我。

两者。将您的 chart.js 和 ng2-charts 升级到最新版本。

如果你想看到成功的结果，去chartjs.org/docs/latest/samples/scales/linear-min-max.html和chartjs.org/docs/latest/samples/bar/vertical.html和min和max一起玩图表。

【参考方案2】：

由于条形图无法解决问题，所以我偶然发现了这个解决方案，我将图表类型从 horizontalBar 图表更改为 line 图表。

public lineChartOptions: ChartOptions = 
    responsive: true,
    legend:  display: false ,
    scales: 
      yAxes: [
       
        display: false,
        ticks: 
          beginAtZero: false
        ,
        scaleLabel: 
          display: true,
          labelString: '',
          fontSize: 20,
         
       ,
      ]
    
    ,
    
    elements: 
      point:
          radius: 0,
          borderWidth: 50
      
    ,
  ;

这解决了我的问题。