Круговая диаграмма - Визуализация данных с таблицами данных и старшими диаграммами - PullRequest
Новая
       8

Круговая диаграмма - Визуализация данных с таблицами данных и старшими диаграммами

0 голосов
/ 08 октября 2018

Я привязываю все свои данные в таблице к графической диаграмме и хотел бы добавить круговую диаграмму ..

Как добавить массив данных в круговую диаграмму, как это сделано дляграфик?Я пытаюсь показать круговую диаграмму, которая отображает страны и их население?

Спасибо!

Это поможет мне найти более эффективный способ создания дополнительных круговых диаграмм самостоятельно

Вот мой попытанный код ниже: 

var draw = false;

init();

/**
 * FUNCTIONS
 */

function init() {
  // initialize DataTables
  var table = $("#table").DataTable();
  // get table data
  var tableData = getTableData(table);
  // create Highcharts
  createHighcharts(tableData);
  // table events
  setTableEvents(table);
}

function getTableData(table) {
  var dataArray = [],
    countryArray = [],
    populationArray = [],
    densityArray = [];
  ageArray = [];

  // loop table rows
  table.rows({
    search: "applied"
  }).every(function() {
    var data = this.data();
    countryArray.push(data[0]);
    populationArray.push(parseInt(data[1].replace(/\,/g, "")));
    densityArray.push(parseInt(data[2].replace(/\,/g, "")));
    ageArray.push(parseInt(data[3].replace(/\,/g, "")));
  });

  // store all data in dataArray
  dataArray.push(countryArray, populationArray, densityArray, ageArray);

  return dataArray;
}

function createHighcharts(data) {
  Highcharts.setOptions({
    lang: {
      thousandsSep: ","
    }
  });



  Highcharts.chart("chart", {
    title: {
      text: "Data Chart"
    },

    subtitle: {
      text: "fsvfsvvs svsdv"
    },

    xAxis: [{
      categories: data[0],
      labels: {
        rotation: -45
      }
    }],



    yAxis: [{
        // first yaxis
        title: {
          text: "Population (2017)"
        }
      },


      {
        // secondary yaxis
        title: {
          text: "Density (P/Km²)"
        },

        min: 0,
        opposite: true
      }
    ],


    series: [{
        name: "Population (2017)",
        color: "#0071A7",
        type: "column",
        data: data[1],
        tooltip: {
          valueSuffix: " M"
        }
      },
      {
        name: "Med Age",
        color: "#68cc72",
        type: "spline",
        data: data[3]
        // ,
        // tooltip: {
        //   valueSuffix: " M"
        //  } 
      },

      {
        name: "Density (P/Km²)",
        color: "#FF404E",
        type: "spline",
        data: data[2],
        yAxis: 1
      }
    ],


    tooltip: {
      shared: true
    },

    legend: {
      backgroundColor: "#ececec",
      shadow: true
    },

    credits: {
      enabled: false
    },

    noData: {
      style: {
        fontSize: "16px"
      }
    }
  });


  Highcharts.chart('pie', {
    chart: {
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false,
      type: 'pie'
    },
    title: {
      text: 'Report Pie Chart'
    },
    tooltip: {
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
      pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
          enabled: true,
          format: '<b>{point.name}</b>: {point.percentage:.1f} %',
          style: {
            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
          }
        }
      }
    },
    series: [{
        name: 'PErcentage',
        colorByPoint: true,
        data: [data[2]],

      }, {
        name: 'PErcentage',
        colorByPoint: true,
        data: [data[1]],

      },
      {
        name: 'PErcentage',
        colorByPoint: true,
        data: [data[3]],

      }
    ]

  });

}

function setTableEvents(table) {
  // listen for page clicks
  table.on("page", function() {
    draw = true;
  });

  // listen for updates and adjust the chart accordingly
  table.on("draw", function() {
    if (draw) {
      draw = false;
    } else {
      var tableData = getTableData(table);
      createHighcharts(tableData);
    }
  });
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Reports</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>
</head>

<body>

  <div class="container">
    <h1>Reports</h1>
    <hr>
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <table id="table" class="table table-striped table-bordered" style="width:100%">
            <thead>
              <tr>
                <th>Country</th>
                <th>Population (2017)</th>
                <th>Density (P/Km²)</th>
                <th>Med. Age</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>China</td>
                <td>1,409,517,397</td>
                <td>150 </td>
                <td>37</td>
              </tr>
              <tr>
                <td>India</td>
                <td>1,339,180,127</td>
                <td>450</td>
                <td>27</td>
              </tr>
              <tr>
                <td>U.S.</td>
                <td>324,459,463</td>
                <td>35</td>
                <td>38</td>
              </tr>
              <tr>
                <td>Indonesia</td>
                <td>263,991,379</td>
                <td>146</td>
                <td>28</td>
              </tr>
              <tr>
                <td>Brazil</td>
                <td>209,288,278</td>
                <td>25</td>
                <td>31</td>
              </tr>
              <tr>
                <td>Pakistan</td>
                <td>197,015,955</td>
                <td>256</td>
                <td>22</td>
              </tr>
              <tr>
                <td>Nigeria</td>
                <td>190,886,311</td>
                <td>210</td>
                <td>18</td>
              </tr>
              <tr>
                <td>Bangladesh</td>
                <td>164,669,751</td>
                <td>1,265</td>
                <td>26</td>
              </tr>
              <tr>
                <td>Russia</td>
                <td>143,989,754</td>
                <td>9</td>
                <td>39</td>
              </tr>
              <tr>
                <td>Mexico</td>
                <td>129,163,276</td>
                <td>66</td>
                <td>28</td>
              </tr>
              <tr>
                <td>Japan</td>
                <td>127,484,450</td>
                <td>350</td>
                <td>46</td>
              </tr>
              <tr>
                <td>Ethiopia</td>
                <td>104,957,438</td>
                <td>105</td>
                <td>19</td>
              </tr>
              <tr>
                <td>Philippines</td>
                <td>104,918,090</td>
                <td>352</td>
                <td>24</td>
              </tr>
              <tr>
                <td>Egypt</td>
                <td>97,553,151</td>
                <td>98</td>
                <td>25</td>
              </tr>
              <tr>
                <td>Viet Nam</td>
                <td>95,540,800</td>
                <td>308</td>
                <td>30</td>
              </tr>
              <tr>
                <td>Germany</td>
                <td>82,114,224</td>
                <td>236</td>
                <td>46</td>
              </tr>
              <tr>
                <td>DR Congo</td>
                <td>81,339,988</td>
                <td>36</td>
                <td>17</td>
              </tr>
              <tr>
                <td>Iran</td>
                <td>81,162,788</td>
                <td>50</td>
                <td>30</td>
              </tr>
              <tr>
                <td>Turkey</td>
                <td>80,745,020</td>
                <td>105</td>
                <td>30</td>
              </tr>
              <tr>
                <td>Thailand</td>
                <td>69,037,513</td>
                <td>135</td>
                <td>38</td>
              </tr>

              <tr>
                <td>U.K.</td>
                <td>66,181,585</td>
                <td>274</td>
                <td>40</td>
              </tr>
              <tr>
                <td>France</td>
                <td>64,979,548</td>
                <td>119</td>
                <td>41</td>
              </tr>
              <tr>
                <td>Italy</td>
                <td>59,359,900</td>
                <td>202</td>
                <td>46</td>
              </tr>
              <tr>
                <td>Tanzania</td>
                <td>57,310,019</td>
                <td>65</td>
                <td>17</td>
              </tr>
              <tr>
                <td>South Africa</td>
                <td>56,717,156</td>
                <td>47</td>
                <td>26</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="col-sm-12">
          <div id="chart"></div>
        </div>
        <div class="col-sm-12">
          <div id="pie"></div>
        </div>
      </div>



    </div>
  </div>

  <script>
    $(document).ready(function() {
      $('#table').DataTable();
    });
  </script>
  <script src="./script.js"></script>
</body>

</html>

1 Ответ

0 голосов
/ 08 октября 2018

В pie серии типа одна серия означает одну круговую диаграмму, поэтому вы должны определить свои данные следующим образом: 

    series: [{
        name: 'PErcentage',
        colorByPoint: true,
        data: data[1]
    }]
...