Изменение диаграммы. js тип диаграммы не удаляет более старую ось - PullRequest
Новая
       9

Изменение диаграммы. js тип диаграммы не удаляет более старую ось

1 голос
/ 21 апреля 2020

Я строю визуализацию графика на основе диаграммы. js Библиотека. Я разрешаю пользователю переключаться с линейного на радарный тип графика, основываясь на выборе выпадающего списка. При переходе от линейного графика к радару и обратно отображаются линейная и радиальная оси. Я пытался найти функцию «Очистить ось», но не смог ее найти.

Есть ли способ принудительно перерисовать правильную ось в зависимости от типа диаграммы?

Вы можете найти пример здесь .

Вот мои основы c HTML и JS / JQuery код: 

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<select id="chartType0">
  <option value="line">Line</option>
  <option value="radar">Radar</option>
</select>
<canvas id="chart0"></canvas>

JQuery: 

$(function() {

    $("#chartType0").change(function() {
    var type = $("#chartType0 option:selected").val();
    var chartObj = $("#chart0").data("graph");
    chartObj.config.type = type;
    chartObj.update();
  });

  var ctx = $("#chart0");
  var chart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [{
        label: 'Dataset',
        backgroundColor: 'rgba(255, 99, 132, 0.5)',
        borderColor: 'rgb(255, 99, 132)',
        data: [5, 10, 5, 7, 20, 30, 45]
      }]
    }
  });
  ctx.data("graph", chart);
});

1 Ответ

1 голос
/ 21 апреля 2020

Похоже, что метод update работает только с новыми данными. Для новых типов вам нужно будет каждый раз создавать новый график. 

$(function() {

  $("#chartType0").change(function() { createChart($(this).val()) })

  function createChart(type) {
    new Chart($("#chart0"), {
      type: type,
      data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
          label: 'Dataset',
          backgroundColor: 'rgba(255, 99, 132, 0.5)',
          borderColor: 'rgb(255, 99, 132)',
          data: [5, 10, 5, 7, 20, 30, 45]
        }]
      }
    })
  }

  createChart('line')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

<select id="chartType0">
  <option value="line">Line</option>
  <option value="radar">Radar</option>
</select>
<canvas id="chart0"></canvas>
...