Question

我正在使用chartJS，除了显示默认图表之外，我想只显示在Combobox上选择的图表。问题是我无法显示默认图表，并且无法隐藏非选定值。我把图表填入onInit，以便在打开页面图表组件时获得数据。我使用功能onChange传递画布图表的ID来显示它，但不能隐藏其他..请注意，我可以添加更多的图表类型，如点图等...什么是最好的方法？我现在的代码是：

html的

我不知道 data-ng-model =“barChart”是否适用于打字稿或该版本的角色..但目的是默认barChart如图所示打开时图表页面

<select (change)="onChange($event.target.value)" data-ng-model="barChart">
 <option value="barChart" selected>{{'Bar Chart' | translate }}</option>
 <option value="chart2">{{'Line Chart' | translate }}</option>
 <option value="rdr">{{'Radar Chart' | translate }}</option>
 <option value="pp1">{{'Pie Chart' | translate }}</option>
</select>

<div class="card-block">
 <canvas id="barChart" hidden="true"></canvas>
 <canvas id="chart2" hidden="true"></canvas>
 <canvas id="rdr" hidden="true"></canvas>
 <canvas id="pp1" hidden="true"></canvas>
</div>

.TS

    ngOnInit() 
{
      var ctx = document.getElementById("barChart");
      var cts = document.getElementById("chart2");
      var radar = document.getElementById("rdr");
      var pie = document.getElementById("pp1");

    // values to fill the chart 
    ...
     this.barChart = new Chart(ctx, {
                   type: 'bar',
                   data: {
                     ...
        }
    ...
    }
}

    onChange(deviceValue) {
      this.select = deviceValue;
      document.getElementById(deviceValue).hidden = false;
    }

    ...

编辑：这个代码从没有任何显示开始，然后当我在组合框上选择一个图表时，它显示图表，但是当我选择其他时，尽管显示选中，但不会隐藏另一个..

Answer 1

使用角度绑定隐藏和显示图表。

.TS

chartTypeSelected: string = '';

<canvas id="barChart" [hidden] = "! chartTypeSelected == 'bar' "> </canvas>
<canvas id="rdr" [hidden] = "! chartTypeSelected == 'radar' "> </canvas>
<canvas id="chart2" [hidden] = "! chartTypeSelected == 'chart2' "> </canvas>

...

然后改变

onChange(deviceValue) {
    this.chartTypeSelected = deviceValue;
 }

我希望这会有所帮助。

Answer 2

试试这个

component.html

<select (change)="onChange($event.target.value)" ng-model="barChart">
 <option value="barChart" selected>Bar Chart</option>
 <option value="chart2">Line Chart</option>
 <option value="rdr">Radar Chart</option>
 <option value="pp1">Pie Chart</option>
</select>

<div class="card-block">
 <canvas *ngIf="select=='barChart'" id="barChart"></canvas>
 <canvas *ngIf="select=='chart2'" id="chart2" ></canvas>
 <canvas *ngIf="select=='rdr'"  id="rdr"></canvas>
 <canvas *ngIf="select=='pp1'" id="pp1" ></canvas>
</div>

可以使用以下两种方式。

*ngIf="select==='pp1'"

*ngIf="select=='pp1'"

由于我没有使用chart.js，我在component.ts中使用了虚拟数据

<强> component.ts

select='barChart';
barCharts=['barChart','chart2','rdr','pp1'];
onChange(deviceValue) {

            this.select = deviceValue;
            console.log(this.select);
}

我希望这会对你有所帮助。如果您有任何问题，请告诉我。

Answer 3

@Suvethan Nantha，我尝试过，但是我的图表在init上填充，当我使用ng-if时，我认为组件会重新执行值以填充图表，我不知道，但它不以你帮助的方式工作..

@bereket gebredingle，就这样它什么都不显示，我控制台记录它并且值是正确的。＆＃34; barChart - true＆＃34;但是没有显示任何内容..在html上我添加了{{barChartSelected}}来检查值，它给出了：true ..

这是一种简单的方式来显示选择并隐藏其他人，无论多少？

谢谢你的回答

编辑：它以这种方式工作，但是如果我需要添加（和变量等等），我拥有的图表越多，可能会在不久的将来感到困惑。）

<强> .TS：

barChartSelected : boolean = false;
radarChartSelected : boolean = false;
chart2Selected : boolean = false;
pp1ChartSelected : boolean = false;
ngOnInit() {
 //default chart showed
 this.barChartSelected = true;
....
  }

onChange(deviceValue) {
        console.log(deviceValue);
        if(deviceValue === "barChart")
        {
            this.barChartSelected = true;
            this.chart2Selected = false;
            this.radarChartSelected = false;
            this.pp1ChartSelected = false;
        }
        else if(deviceValue === "chart2")
        {
            this.barChartSelected = false;
            this.chart2Selected = true;
            this.radarChartSelected = false;
            this.pp1ChartSelected = false;
        }
        else if(deviceValue === "rdr")
        {
            this.barChartSelected = false;
            this.chart2Selected = false;
            this.radarChartSelected = true;
            this.pp1ChartSelected = false;
        }
        else if(deviceValue === "pp1")
        {
            this.barChartSelected = false;
            this.chart2Selected = false;
            this.radarChartSelected = false;
            this.pp1ChartSelected = true;
        }

    }

<强> html的：

<select (change)="onChange($event.target.value)" data-ng-model="barChart">
  <option value="barChart" selected>{{'Bar Chart' | translate }}</option>
  <option value="chart2">{{'Line Chart' | translate }}</option>
  <option value="rdr">{{'Radar Chart' | translate }}</option>
  <option value="pp1">{{'Pie Chart' | translate }}</option>
</select>


<div class="card-block">
  <canvas id="barChart" [hidden] = "!barChartSelected"></canvas>
  <canvas id="chart2" [hidden] = "!chart2Selected"></canvas>
  <canvas id="rdr" [hidden] = "!radarChartSelected"></canvas>
  <canvas id="pp1" [hidden] = "!pp1ChartSelected"></canvas>
</div>

有效，但它效率很高，我需要的图表越多，我必须添加更多的

和

下拉菜单 - 隐藏非选定选项和默认选项

3 个答案:

使用角度绑定隐藏和显示图表。