Блог

Главная - Вопросы по программированию - Как нарисовать круг с логарифмическим масштабом в HighCharts?

Как нарисовать круг с логарифмическим масштабом в HighCharts?

#javascript #charts #highcharts #pie-chart #logarithm

#javascript #Диаграммы #highcharts #круговая диаграмма #логарифм

Вопрос:

Мне нужно нарисовать круг (или пончик, или половину пончика, я думаю, что это один и тот же процесс) в Highcharts. Проблема в том, что данные сильно искажены, т. е. один фрагмент имеет размер = 3, а второй — размер = 1000.

конечный результат — пирог с гигантским куском, а срез почти невидим.

мой график

Есть ли способ вывести размер срезов логарифмическим способом (как для диаграмм axis)?

Комментарии:

1. Я не вижу варианта использования для этого. Пироги и пончики полезны для отображения относительных процентов между точками данных в наборе. Если одна точка данных на 2 порядка больше другой — что ж, это так, и вы должны это увидеть. Если у вас есть «логарифмическая» дуга, вы бы ввели конечного пользователя в заблуждение относительно относительной важности одной точки данных по сравнению с другой, поскольку это нарушает парадигму того, как обычно просматриваются круговые диаграммы.

2. @wergeld Я понимаю вашу точку зрения, и вы правы, но мне НУЖНО напечатать все ряды, даже если они имеют разный порядок величины

3. Интересно посмотреть, как это будет выглядеть…

4. не очень хорошо, я знаю. Конечный пончик не будет представлять реальные «данные», но, в конце концов, это то, что мне нужно 🙂

5. Если вам нужно отобразить числа, но вы визуализируете их таким образом, который на самом деле не представляет чисел, в лучшем случае все, что вы сделали, это бессмысленно украсили цифры, в худшем случае вы полностью ввели в заблуждение свою аудиторию. Лучше просто отобразить простой список или таблицу чисел, где нет бессмысленной графики, искажающей данные и сбивающей с толку потребителей данных. FWIW

Ответ №1:

Круговая диаграмма не использует axis, поэтому установка ее типа в logarithmic не сработает. Что вы можете сделать, так это преобразовать ваши данные и сохранить «реальное» значение, чтобы его можно было отобразить во всплывающей подсказке, метках данных и т.д.

     var data = [1, 2, 4, 8, 16, 32, 64, 128, 256, 512],
        logData = data.map(function (value) {
        return {
            y: Math.log(value) / Math.LN10, 
            realY: value // store a pure value
          };
      });


    // later in chart options
    tooltip: {
     pointFormat: 'x = {point.x}, y = {point.realY}' // access the pure value in a tooltip
    }

Сравнение круговых диаграмм с преобразованными данными и с «чистыми» данными: http://jsfiddle.net/rz9899j8