餅圖僅在我放大時顯示

Question

我一直在嘗試使用 Chart.js 顯示餅圖，但它僅在畫布尺寸發生變化時才會顯示。

這個想法是從 RESTAPI 獲取一些數據並在餅圖中顯示信息

我發現了另一個已回答的問題，但它使用了我不知道的 Ajax（至少據我所知）。

您可以在下面找到我的代碼


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <title>My Chart.js Chart</title>
</head>
<body>
<div >
    <canvas id="myChart" width="500" height="500"></canvas>
</div>

</body>


<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var vNames=[];
    var vCounts=[];
    fetch('/Conflicts/conflictsOnAllCountries')
        .then(response => response.json())
        .then(data => {

            data.forEach(country => vNames.push(country.name))
            data.forEach(country => vCounts.push(country.conflictsCount))
            data.forEach(country => console.log(country.name))
            data.forEach(country => console.log(country.conflictsCount))

        })
        .catch(err => {
            console.error('Fetch error:', err);
        });


    var myChart = new Chart(ctx, {
                type: 'pie', // bar, horizontalBar, pie, line, doughnut, radar, polarArea
                data: {

                    labels: vNames,
                    datasets: [{
                        label: 'Conflicts',
                        data: vCounts,
                        //backgroundColor:'green',
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.6)',
                            'rgba(54, 162, 235, 0.6)',
                            'rgba(255, 206, 86, 0.6)',
                            'rgba(75, 192, 192, 0.6)',
                            'rgba(153, 102, 255, 0.6)',
                            'rgba(255, 159, 64, 0.6)',
                            'rgba(255,173,155,0.6)',
                            'rgba(146,255,78,0.6)',
                            'rgba(113,255,219,0.6)'

                        ],
                        borderWidth: 1,
                        borderColor: '#777',
                        hoverBorderWidth: 3,
                        hoverBorderColor: '#000'
                    }]
                },
                options: {
                    title: {
                        display: true,
                        text: 'Conflicts/Country',
                        fontSize: 25
                    },
                    legend: {
                        display: true,
                        position: 'right',
                        labels: {
                            fontColor: '#000'
                        }
                    },
                    layout: {
                        padding: {
                            left: 50,
                            right: 50,
                            bottom: 50,
                            top: 50
                        }
                    },
                    tooltips: {
                        enabled: true
                    }
                }
            });



    // Global Options
    Chart.defaults.global.defaultFontFamily = 'Lato';
    Chart.defaults.global.defaultFontSize = 15;
    Chart.defaults.global.defaultFontColor = '#777';



</script>
</html>

Answer 1

您需要在fetch完成並處理數據后繪制圖表。

因此，您可以將圖表繪制代碼放在一個函數中，並在處理data后立即在then內部調用它。

var ctx = document.getElementById('myChart').getContext('2d');
var vNames = [];
var vCounts = [];
fetch('/Conflicts/conflictsOnAllCountries')
  .then(response => response.json())
  .then(data => {

    data.forEach(country => {
      vNames.push(country.name)
      vCounts.push(country.conflictsCount)
    });

    drawChart();
  })
  .catch(err => {
    console.error('Fetch error:', err);
  });

function drawChart() {
  var myChart = new Chart(ctx, {
    type: 'pie', // bar, horizontalBar, pie, line, doughnut, radar, polarArea
    data: {

      labels: vNames,
      datasets: [{
        label: 'Conflicts',
        data: vCounts,
        //backgroundColor:'green',
        backgroundColor: [
          'rgba(255, 99, 132, 0.6)',
          'rgba(54, 162, 235, 0.6)',
          'rgba(255, 206, 86, 0.6)',
          'rgba(75, 192, 192, 0.6)',
          'rgba(153, 102, 255, 0.6)',
          'rgba(255, 159, 64, 0.6)',
          'rgba(255,173,155,0.6)',
          'rgba(146,255,78,0.6)',
          'rgba(113,255,219,0.6)'

        ],
        borderWidth: 1,
        borderColor: '#777',
        hoverBorderWidth: 3,
        hoverBorderColor: '#000'
      }]
    },
    options: {
      title: {
        display: true,
        text: 'Conflicts/Country',
        fontSize: 25
      },
      legend: {
        display: true,
        position: 'right',
        labels: {
          fontColor: '#000'
        }
      },
      layout: {
        padding: {
          left: 50,
          right: 50,
          bottom: 50,
          top: 50
        }
      },
      tooltips: {
        enabled: true
      }
    }
  });
}


// Global Options
Chart.defaults.global.defaultFontFamily = 'Lato';
Chart.defaults.global.defaultFontSize = 15;
Chart.defaults.global.defaultFontColor = '#777';

餅圖僅在我放大時顯示

問題描述

1 個解決方案

解決方案1
0 已采納 2019-12-19 18:52:08

餅圖僅在我放大時顯示

問題描述

1 個解決方案

解決方案1 0 已采納 2019-12-19 18:52:08

解決方案1
0 已采納 2019-12-19 18:52:08