Как анимировать радиолокационную диаграмму

Итак, я новичок в программировании, но друг попросил меня помочь ему составить диаграмму, демонстрирующую их навыки. Я нашел в Интернете пример, в который внес некоторые изменения, чтобы настроить его в соответствии с их потребностями. Проблема, с которой я столкнулся, заключается в том, как ее анимировать. Я пытаюсь заставить каждую точку графика перемещаться по одной, пока диаграмма не развернется полностью. Затем я пытаюсь свернуть каждый из них с их окончательного значения (т. е. 65) обратно до 0, а затем снова повторить процесс расширения. Итак, по сути, я хочу, чтобы они расширялись по одному, а затем, после того, как все они развернутся, сворачивались один за другим, пока не вернутся к нулю, затем снова расширялись, и это постоянно повторялось (если возможно). Я не уверен, возможно ли это или слишком много. Я искал в Интернете какую-нибудь анимацию, чтобы хотя бы развернуть одну за другой, но ничего не нашел. Я включаю код, который у меня есть ниже:

<!DOCTYPE html>
<html lang = "en">
  <head>
    <meta charset = "utf-8">
    <title>Radar Chart in JavaScript</title>
    <script src = "https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
    <script src = "https://cdn.anychart.com/releases/8.11.0/js/anychart-radar.min.js"></script>
    <style type = "text/css">
      html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id = "container"></div>
    <script>

      anychart.onDocumentReady(function () {

        // create a data set
        var chartData = {
          rows: [
            ['Advertising', 33],
            ['Branding', 34],
            ['Creative Problem-Solving', 17],
            ['Digital Marketing', 50],
            ['Research', 24],
            ['SEO', 11],
            ['Social Media Marketing', 59],
            ['Strategy', 43],
            ['UI', 22],
            ['UX', 73]
          ]
        };

        // create a radar chart
        var chart = anychart.radar();

        // set the series type
        chart.defaultSeriesType('area');

        // set the chart data
        chart.data(chartData);

        // set the color palette
        chart.palette(['#9BC53DE6']);

        // configure the appearance of the y-axis
        chart.yAxis().stroke('#000000');
        chart.yAxis().ticks().stroke('#000000');

        // configure the stroke of the x-grid
        chart.xGrid().stroke({
          color: "#545f69",
          thickness: 0.5,
          dash: "10 5"
        });

        // configure the appearance of the y-grid
        chart.yGrid().palette(['gray 0.05', 'gray 0.025']);

        // begin the y-scale at 0
        chart.yScale().minimum(0);

        // set the y-scale ticks interval
        chart.yScale().ticks().interval(10);

        // set the hover mode
        chart.interactivity().hoverMode('by-x');

        //  set the marker type
        chart.markerPalette(['star5']);

        // improve the tooltip
        chart.tooltip()
          .displayMode('union')
          .useHtml(true)
          .format(function(e){
            console.info(this);
            return '<span style = "color:' + this.series.color() + '">' +
              this.seriesName + ": " + this.value + "</span>"
          });

        // set chart legend settings
        chart.legend()
          .align('center')
          .position('center-bottom')
          .enabled(false);

        // set the chart title
        chart.title("Services");

        // set container id for the chart
        chart.container('container');

        // initiate chart drawing
        chart.draw();
      });

    </script>
  </body>
</html>

Если возможно, не могли бы вы помочь мне, как написать что-то подобное. Мне нужно будет включить его в этот код, поскольку им нужен один html-файл, который они смогут загрузить на свой веб-сайт Wix.

Я не уверен, возможно ли что-либо из этого, но я был бы очень признателен за любую помощь или код, который я могу использовать.

Большое спасибо за ваше время и помощь.

javascript html anychart radar-chart spider-chart

27.04.2024 21:54

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

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

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я попробовал, это то, что вы ищете? Обратите внимание, что переменные скорости и шага можно регулировать.

<!DOCTYPE html>
<html lang = "en">
  <head>
    <meta charset = "utf-8">
    <title>Radar Chart Animation</title>
    <script src = "https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
    <script src = "https://cdn.anychart.com/releases/8.11.0/js/anychart-radar.min.js"></script>
    <style type = "text/css">
      html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id = "container"></div>
    <script>

      anychart.onDocumentReady(function () {

        var originalData = {
          rows: [
            ['Advertising', 33],
            ['Branding', 34],
            ['Creative Problem-Solving', 17],
            ['Digital Marketing', 50],
            ['Research', 24],
            ['SEO', 11],
            ['Social Media Marketing', 59],
            ['Strategy', 43],
            ['UI', 22],
            ['UX', 73]
          ]
        };

        var zeroData = {
          rows: [
            ['Advertising', 0],
            ['Branding', 0],
            ['Creative Problem-Solving', 0],
            ['Digital Marketing', 0],
            ['Research', 0],
            ['SEO', 0],
            ['Social Media Marketing', 0],
            ['Strategy', 0],
            ['UI', 0],
            ['UX', 0]
          ]
        };

        var speed = 80; // speed in ms (smaller is faster)
        var step = 3; // adjust as needed

        // create a radar chart
        var chart = anychart.radar();

        // set the series type
        chart.defaultSeriesType('area');

        // set the color palette
        chart.palette(['#9BC53DE6']);

        // configure the appearance of the y-axis
        chart.yAxis().stroke('#000000');
        chart.yAxis().ticks().stroke('#000000');

        // configure the stroke of the x-grid
        chart.xGrid().stroke({
          color: "#545f69",
          thickness: 0.5,
          dash: "10 5"
        });

        // configure the appearance of the y-grid
        chart.yGrid().palette(['gray 0.05', 'gray 0.025']);

        // begin the y-scale at 0
        chart.yScale().minimum(0);

        // set the y-scale ticks interval
        chart.yScale().ticks().interval(10);

        // set the hover mode
        chart.interactivity().hoverMode('by-x');

        //  set the marker type
        chart.markerPalette(['star5']);

        // improve the tooltip
        chart.tooltip()
          .displayMode('union')
          .useHtml(true)
          .format(function(e){
            console.info(this);
            return '<span style = "color:' + this.series.color() + '">' +
              this.seriesName + ": " + this.value + "</span>"
          });

        // set chart legend settings
        chart.legend()
          .align('center')
          .position('center-bottom')
          .enabled(false);

        // set the chart title
        chart.title("Services");

        // set container id for the chart
        chart.container('container');

        // initiate chart drawing
        chart.draw();

        function animateChart(fromData, toData) {
          var data = JSON.parse(JSON.stringify(fromData)); 
          var index = 0;
          var expandingInterval = setInterval(function() {
            if (index < data.rows.length) {
              var targetValue = toData.rows[index][1];
              if (data.rows[index][1] < targetValue) {
                data.rows[index][1] += step;
                chart.data(data);
                chart.draw();
              } else {
                index++;
              }
            } else {
              clearInterval(expandingInterval);
              var collapsingIndex = data.rows.length - 1;
              var collapsingInterval = setInterval(function() {
                if (collapsingIndex >= 0) {
                  data.rows[collapsingIndex][1] -= step;
                  chart.data(data);
                  chart.draw();
                  if (data.rows[collapsingIndex][1] <= 0) {
                    data.rows[collapsingIndex][1] = 0; 
                    collapsingIndex--;
                    if (collapsingIndex < 0) {
                      clearInterval(collapsingInterval);
                      animateChart(zeroData, originalData); 
                    }
                  }
                }
              }, speed);
            }
          }, speed);
        }

        animateChart(zeroData, originalData);

      });

    </script>
  </body>
</html>

Привет. Огромное спасибо, это идеально и именно то, что я ищу. Я очень ценю всю помощь. Спасибо!

— 28.04.2024 00:03

27.04.2024 22:17