Блог

Главная - Вопросы по программированию - HighCharts как удалить отображение при загрузке piechart

HighCharts как удалить отображение при загрузке piechart

#css #highcharts

Вопрос:

пустая круговая диаграмма

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

Вот пример js скрипки

https://jsfiddle.net/gdm0wpey/

 series: [
        {
            name: "Browsers",
            colorByPoint: true,
        }
 ],

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

Ответ №1:

Вы можете скрыть пустые серии пирогов, установив значение borderWidth 0.

     series: [{
        borderWidth: 0,
        ...
    }]

Живая демонстрация: https://jsfiddle.net/Черная метка/4j7fa6d1/

Ссылка на API: https://api.highcharts.com/highcharts/series.pie.borderWidth

Или используйте showLoading и hideLoading методы диаграммы:

 chart.showLoading();

// async function
    chart.series[0].setData([1, 2, 3]);
    chart.hideLoading();

Живая демонстрация: https://jsfiddle.net/Черная метка/kpbLr6n4/

Ссылка на API: https://api.highcharts.com/ссылка на класс/Высокие диаграммы.Диаграмма#showLoading

Ответ №2:

Один из вариантов удаления границы-установить ширину границы равной 0 в поле plotOptions для pie :

 Highcharts.chart('container', {
   /* ... options ... */
   plotOptions: {
      pie: {
         borderWidth: 0
      }
   }
});

Ответ №3:

Другим вариантом может быть:

  • Перезапишите класс с помощью пользовательских стилей css:

Пример:

 /* This is the css class name of the pie chart when has no data: */
.highcharts-empty-series {
  stroke: #ffffff !important; /* the same color of the background in your jsfiddle example. */
}

Вот модифицированный jsfiddle.

Кроме того, рассмотрите возможность использования noData опции — из документации:

ноДата

Параметры отображения сообщения типа «Нет данных для отображения». Для этой функции требуется файл no-data-to-display.js для загрузки на страницу. Фактический текст для отображения задается в параметре lang.NoData.

Требует

модули/нет данных для отображения

Попробовать это

Линейный график с модулем без данных

Круговая диаграмма с модулем без данных

Метки: