HighCharts: общее значение не отображается в круговой диаграмме

Я пытаюсь отобразить общее количество пользователей на круговой диаграмме. Но мое «получение общего кода» не работает. Он ничего не отображает.

Вот код, который я использую:

events: {
        load: function(event) {
          var total = 0;
            for(var i=0, len=this.series[0].yData.length; i<len; i++){
                total += this.series[0].yData[i];
            }
          var text = this.renderer.text(
            'Total: ' + total,
            this.plotLeft,
            this.plotTop - 20
        ).attr({
            zIndex: 5
        }).add()
        }
          }

Если я могу показать вам свой полный код, вот он:

var data = <?php echo $data ; ?>

data.forEach(function(el) {
el.name = el.label;
el.y = Number(el.value);
});

Highcharts.chart('pieDiv', {
chart: {

    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: 'pie',
    events: {
        load: function(event) {
          var total = 0;
            for(var i=0, len=this.series[0].yData.length; i<len; i++){
                total += this.series[0].yData[i];
            }
          var text = this.renderer.text(
            'Total: ' + total,
            this.plotLeft,
            this.plotTop - 20
        ).attr({
            zIndex: 5
        }).add()
        }
          }
},
title: {
    text: undefined
},
credits: {
  enabled: false
},
exporting: { enabled: false } ,
tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b> ({point.y} 
Users)'
},
plotOptions: {
    pie: {
colors: 
Highcharts.map(["#59deed","#e86e65","#de8f14","#589bcf","#a05195","#35cc95", 
"#72a7b3"], function (color) {
    return {
        radialGradient: {
            cx: 0.5,
            cy: 0.3,
            r: 0.7
        },
        stops: [
            [0, color],
            [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
        ]
    };
 }),
         states: {
        inactive: {
            opacity: 1
        }
    },
        allowPointSelect: true,
        cursor: 'pointer',
        fillOpacity: 1,
         showInLegend: true,
        dataLabels: {
            enabled: true,
            format: '<b>{point.name}</b>: {point.percentage:.1f} % <br/> 
({point.y} Users)',
             style: {
                color: (Highcharts.theme && 
Highcharts.theme.contrastTextColor) || 'black'
            }
        }

    }
},
series: [{
    name: 'Users',
    colorByPoint: true,
    data: data
}]
});

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

Я думаю, что эта строка: var data = <?php echo data ; ?> может быть проблемой. В PHP вам нужно $ перед переменными, прямо сейчас вы ничего не пытаетесь достичь (удивлен, что вы не получаете ошибок). В этой строке должно быть $data, если у вас есть какое-то значение для этой переменной. Небольшой совет: перед тем, как установить значение из PHP в JS, инициализируйте var data = '', а затем data = <?php echo $data; ?>. Также я бы рекомендовал: data = <?php echo $data ? $данные: ''; ?> Надеюсь, это решит проблему.

Grzegorz Lasak 30.04.2019 09:25

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

Okeyy 30.04.2019 09:27
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
272
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Вы сделали простую ошибку в js для кода цикла, используя , вместо ;. Проверьте код и рабочую демонстрацию с правильным отображением всех данных.

Код:

  chart: {
    events: {
      load: function() {
        var total = 0,
          len = this.series[0].yData.length,
          text;

        for (var i = 0; i < len; i++) {
          total += this.series[0].yData[i];
        }

        text = this.renderer.text(
          'Total: ' + total,
          this.plotLeft,
          this.plotTop - 20
        ).attr({
          zIndex: 5
        }).add();
      }
    }
  }

Демо:

Я не могу понять, почему у меня не работает.? Я попробовал ваш код, но все равно ничего

Okeyy 30.04.2019 09:35

Возможно, он находится под другими элементами? Попробуйте изменить значения x и y и проверьте, отображается ли элемент вообще. Кроме того, вы можете попробовать вызвать метод toFront() для текстового элемента svg (подробнее об этом здесь: api.highcharts.com/class-reference/…).

Wojciech Chmiel 30.04.2019 09:45

Мне нужен код для круговой диаграммы. Ваш пример хорош, но он для линейной диаграммы.

Okeyy 30.04.2019 10:52

Визуализатор работает одинаково в линейных и круговых сериях. Проверьте этот пример: jsfiddle.net/BlackLabel/qau0nLz5

Wojciech Chmiel 30.04.2019 11:35

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

Okeyy 30.04.2019 11:48

Рад слышать;)

Wojciech Chmiel 30.04.2019 11:57

Другие вопросы по теме