Nano Hash - криптовалюты, майнинг, программирование

Очистить гистограмму при изменении параметра

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

var chart1 = new google.visualization.ColumnChart(
   document.getElementById('chart0')
   );
var chartTotal1 = new google.visualization.ColumnChart(
  document.getElementById('chart1')
   );
  $.ajax({
         url: url,
         type: "Get",
         dataType: "json",
         data: {
             Year: selectedYear,
             Filtertxt: selectedQuarter
         },
         crossDomain: true,
         success: function(data) {
                 if (data.length > 0) {

                if (selectedQuarter == 'Q1') {

                    drawchartQ1(data);

                }

                else {
                    clearChart1();
                }

                if (selectedQuarter == 'Q2') {

                    drawchartQ2(data);


                }
                else {
                    clearChart1();
                }


                if (selectedQuarter == 'Q3') {

                    drawchartQ3(data);

                }

                else {
                    clearChart1();
                }

                if (selectedQuarter == 'Q1,Q2,Q3,Q4') {


                    drawchartAll(data);
                }

                else {
                    clearChart1();
                }


            }


}
    });

    function clearChart1() {
        chart1.clearChart();
        chartTotal1.clearChart();
    }

    function drawchartQ1(data) {
        // another  graph to display the total of sprint
        var total = 0;
        for (var i = 0; i < data.length; i++) {
            total = total + data[i].TotalAmt;
        }
        var data2 = google.visualization.arrayToDataTable([
       ['Months', 'Total'],
       [null, total],
       [null, null]




        ]);

        var options = {
            width: 600,
            height: 400,
            vAxis: {
                title: ""
            },

            isStacked: true,
            hAxis: {
                title: "All Months"
            }
        };

        options.title = 'Quarter 1 Total';
        chartTotal1.draw(data2, options);


        var data1 = google.visualization.arrayToDataTable([
        ['Month', 'ID1', 'ID2', 'ID3', 'ID4', 'ID5'],
        ['Jan,2017', data[0].TotalAmt, null, null, null, null],

        ['Feb,2017', null, data[1].TotalAmt, data[2].TotalAmt, null, null],

        ['Mar,2017', null, null, null, data[3].TotalAmt, data[4].TotalAmt],


        ]);

        var options = {
            width: 600,
            height: 400,
            vAxis: {
                title: ""
            },

            isStacked: true,
            hAxis: {
                title: "Month"
            }
        };

        options.title = 'Quarter 1';
        chart1.draw(data1, options);


    }

Ответы:


1

сохранить ссылку на диаграмму, чтобы вы могли удалить ее позже

использовать метод диаграммы --> clearChart()

настройка аналогична следующему фрагменту...

function drawCharts() {
  var chart1 = new google.visualization.ColumnChart(
    document.getElementById('chart0')
  );
  var chartTotal1 = new google.visualization.ColumnChart(
    document.getElementById('chart1')
  );

  $.ajax({
    url: url,
    type: "Get",
    dataType: "json",
    data: {
      Year: selectedYear,
      Filtertxt: selectedQuarter
    },
    crossDomain: true,
  }).done(function (data) {
    if (data.length > 0) {
      switch (selectedQuarter) {
        case 'Q1':
          drawchartQ1(data);
          break;

        case 'Q2':
          drawchartQ2(data);
          break;

        case 'Q3':
          drawchartQ3(data);
          break;

        case 'Q4':
          drawchartQ4(data);
          break;

        default:
          clearChart1();
      }
    } else {
      clearChart1();
    }
  });

  function clearChart1() {
    chart1.clearChart();
    chartTotal1.clearChart();
  }

  function drawChart1(data) {
    var data1 = google.visualization.arrayToDataTable([
      ['Month', 'ID1', 'ID2', 'ID3', 'ID4', 'ID5'],
      ['Jan,2017', data[0].TotalAmt, null, null, null, null],
      //['Jan,2017', null, null, null, null, null],
      ['Feb,2017', null, data[1].TotalAmt, data[2].TotalAmt, null, null],
      //['Feb,2017', null, null, null, null, null],
      ['Mar,2017', null, null, null, data[3].TotalAmt, data[4].TotalAmt],
      //['Mar,2017', null, null, null, null, null]
    ]);
    var options = {
      width: 600,
      height: 400,
      vAxis: {
        title: ""
      },
      isStacked: true,
      hAxis: {
        title: "Month"
      }
    };
    options.title = 'Quarter 1';

    chart1.draw(data1, options);

    // another  graph to display the total of sprint
    var total = 0;
    for (var i = 0; i < data.length; i++) {
      total = total + data[i].TotalAmt;
    }

    var data2 = google.visualization.arrayToDataTable([
      ['Months', 'IDs'],
      [null, total],
      [null, null]
    ]);
    var options = {
      width: 600,
      height: 400,
      vAxis: {
         title: ""
      },
      isStacked: true,
      hAxis: {
         title: "All Months"
      }
    };
    options.title = 'Quarter 1 Total';
    chartTotal1.draw(data2, options);
  }
}
13.07.2017
  • Здравствуйте, спасибо за ваш ответ, но это решение, похоже, не работает для меня. 14.07.2017
  • Ничего..просто диаграмма не показывает себя. 14.07.2017
  • Конечно, дай мне когда-нибудь 14.07.2017
  • есть проблема с вашей логикой selectedQuarter - например, если квартал 'Q1', он будет нарисован, а затем очищен оператором 'Q2' if - попробуйте вместо этого использовать оператор switch, измененный ответ выше... 15.07.2017
  • Я попытался переключиться, но теперь я столкнулся с другой проблемой. Q3 имеет только одну диаграмму, то есть chartTotal1, но когда я нажимаю на Q3, он также показывает график предыдущего квартала 1 с chartTotal1 Q3. В четвертом квартале нет графиков, поэтому я использовал clearchart в четвертом квартале, но он по-прежнему показывает графики предыдущего квартала. 15.07.2017
  • Новые материалы

    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..

    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..