Как сделать круговую диаграмму с помощью Google Pie Chart

Делаем красвую динамическую круговую диаграмму с помощью Google Charts, диаграмму легко встроить в свой проект, легко изменять и кастомизировать. Саму лучшее и удобное решение для 99% случаев.

Круговая диаграмма Google Pie Chart

Подключаем библиотеку

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

HTML

<div id="piechart_3d" style="width: 900px; height: 500px;"></div>

Скрипт

google.charts.load("current", { packages: ["corechart"] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ["Task", "Hours per Day"],
    ["Work", 11],
    ["Eat", 2],
    ["Commute", 2],
    ["Watch TV", 2],
    ["Sleep", 7]
  ]);

  var options = {
    title: "My Daily Activities",
    is3D: true
  };

  var chart = new google.visualization.PieChart(
    document.getElementById("piechart_3d")
  );
  chart.draw(data, options);
}

Пример круговой диаграммы Google Pie Chart

Кастомный пример круговой диаграммы Google Pie Chart

HTML

<div class="chart_budget" id="chart_budget"></div>

CSS

.chart_budget {
    width: 450px;
    height: 300px;
    margin: 0 auto 20px;
}

JS

// Pie Chart from Google
//https://developers.google.com/chart/interactive/docs/gallery/piechart?hl=ru

// Load the Visualization API and the corechart package.
google.charts.load("current", { packages: ["corechart"] });

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
  // Create the data table.
  var data = new google.visualization.DataTable();
  data.addColumn("string", "Topping");
  data.addColumn("number", "Slices");
  data.addRows([
    ["Bills", 29],
    ["Debts", 25],
    ["Budgets", 21],
    ["Savings", 14],
    ["In My Pocket", 11]
  ]);

  // Set chart options
  var options = {
    // 'title': 'How Much Pizza I Ate Last Night',
    // 'width': 450,
    // 'height': 300,
    pieHole: 0.4,
    pieStartAngle: 330,
    chartArea: {
      left: 0,
      top: 0,
      width: "100%",
      height: "100%"
    },
    slices: {
      0: { color: "#FFA853" },
      1: { color: "#FFD65E" },
      2: { color: "#B19EFF" },
      3: { color: "#82BCFF" },
      4: { color: "#0BF0D5" }
    },
    legend: {
      position: "right",
      alignment: "center",
      textStyle: {
        color: "#131A1D",
        fontSize: 16
      }
    },
    pieSliceTextStyle: {
      color: "#fff",
      fontSize: 16
    }
  };

  // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.PieChart(
    document.getElementById("chart_budget")
  );
  chart.draw(data, options);
}

Рабочий пример кастомной диаграммы в формате Пирога

Круговая диаграмма с помощью HTML и CSS (Pie Chart with HTML and CSS)

Вы можете создать круговую диаграмму в HTML, используя простую функцию CSS под названием conic-gradient. Во-первых, мы добавляем <div> элемент…

Анимированный вывод числа от нуля до заданного

Выводим число, например, подсчет голосов, или рассчет процентов после выполнения какого-либо действия. Можно выводить все…

Определяем ширину и высоту рабочей области браузера

Итак, задача такая — проверить отображение каких-то элементов на разных разрешениях экрана. Но современная проблема…

Не отображать точки (slick dots) для одного слайда

Простая задача — если слайд всего один, то не отображать slick dots, чтобы слайдер выглядел…

Ответить