Question

我是开发新手。在HTML部分中，画布id就在那里。和组件。在这个文件中，我将创建一个函数并使用API（我的JSON）。现在我的任务是显示JSON数据（table_count：2）。我试过了，但我不知道怎么过，所以请帮助我。我的图表是图表栏，我想获取特定的JSON数据并在数据中实现：[5,55]。

   <html>
    <div class="col-lg-12">
    <canvas id="chart-bar"></canvas>
    </div>
    component.ts
      getDashboardDetail() {
       this.loaderService.display(true);
       const headers = new Headers({
        'Authorization': localStorage.getItem('Token'),
        'Content-Type': 'application/json'
       });
       const options = new RequestOptions({
        headers: headers
       });
       this.service.get(options, services.dashboard_service).subscribe((response) => {
        if (response.status === 200) {
         this.dashboard_service = response.json();
         this.loaderService.display(false);
         if (response.status === 200 && response.json()) {
          this.dashboard_service = JSON.parse(response.json().response);

          const barCtx = $("#chart-bar")[0].getContext('2d');
          const dataBar = {
           labels: ["Hive", "HBase", "Cubes"],
           datasets: [{
            label: "Count",
            backgroundColor: [
             'rgba(255, 99, 132, 0.2)',
             'rgba(54, 162, 235, 0.2)',
             'rgba(255, 206, 86, 0.2)',
             'rgba(75, 192, 192, 0.2)',
             'rgba(153, 102, 255, 0.2)',
             'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
             'rgba(255,99,132,1)',
             'rgba(54, 162, 235, 1)',
             'rgba(255, 206, 86, 1)',
             'rgba(75, 192, 192, 1)',
             'rgba(153, 102, 255, 1)',
             'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1,
            data:[5,55]
           }]
          };

          new Chart(barCtx, {
           type: "bar",
           data: dataBar,
           options: {
            scales: {
             xAxes: [{
              stacked: true
             }],
             yAxes: [{
              stacked: true
             }]
            }
           }
          });

         }
        }
       }, (err) => 

       })

JSON

{
    "dashboard_details": {
        "big_data_warehouse": {
            "distribution": {
                "warehouse": {
                    "hive": {
                        "database": {
                            "name": "demo",
                            "table_count": "2"
                        }
                    }
                }
            }
        }
    }
}

如何在图表栏中获取Json表计数数据？

0 个答案: