2015-01-06 3 views
2

Я хотел бы продемонстрировать, чего я пытаюсь достичь, используя две диаграммы.Highcharts - Скрыть нулевые значения без использования 'null'

Эта карта пончиков (http://jsfiddle.net/b749uoto/) имеет два нулевых значения: один для «Sony Ericsson» и еще один для «Nintendo». Код прекрасно скрывает эти значения. Даже ярлыки не появляются.

Код ответственность за сокрытие нулевых значений на графике пончик:

dataLabels: { 
    formatter: function() { 
    // display only if larger than 1 
     return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null; 
    } 
} 

Теперь этот 3d гистограмма (http://jsfiddle.net/arqL4ch2/1/) имеет те же данные, что и график пончик выше, но показываются как нулевые значения. Я всегда получаю первое впечатление от этой диаграммы, что «Sony Ericsson» и «Nintendo» имеют значения, отличные от нуля.

Я хотел бы скрыть эти две компании с трехмерной диаграммой (данные и метки) без применения значений «null», потому что при этом создается огромное пустое пространство между компаниями.

Я пробовал некоторые предложения, которые я искал, но это не сработало. Я не мастер javascript.

Возможно ли это? Благодарю.

EDIT 1: Я удалил абзац выше, где упоминаю, что я использую PHP для получения данных диаграммы, чтобы избежать получения ответов на PHP или SQL. Я просто хочу, чтобы такое же поведение на диаграмме 1 применялось на диаграмме 2. Я твердо верю, что ответ зависит от некоторого Javascript-fu, и у меня его нет.

EDIT 2: код, отображаемый для обеих графиков, был слишком длинным. Я удалил его и оставил только часть «скрыть нулевые значения» на диаграмме пончиков.

ответ

1

Если вы хотите получить только одно значение для каждой категории, вы можете проверить его в своем PHP-коде, и если его значение равно нулю, не добавляйте его в массив данных серии. Не видя код, который генерирует ваши данные, я не могу быть более конкретным. Если вы используете SQL-запрос для получения значений, можете ли вы получить только ненулевые записи? Что-то вроде этого psuedocode:

SELECT vendor, deviceCount 
FROM devices 
WHERE deviceCount > 0 

Я сделал некоторые испытания, и вы можете это сделать в самой схеме - только не без изменения код. Используйте chart.events.load крюк:

events: { 
     load: function() { 
      var theChart = this; 
      var theSeries = this.series; 
      var removeIndex = []; 
      var weight = 0; 
      for (var key in theSeries) { 
       var aSeries = theSeries[key]; 
       if (aSeries.data[0].y == 0) { 
        removeIndex.push(parseInt(key)); 
       } 
      } 
      for (var i in removeIndex) { 
       var iRemove = removeIndex[i] - weight; 
       theChart.series[iRemove].remove(); 
       weight = weight + 1; 
      } 
     } 
    } 

Хитрость является weight пункт. Когда вы удаляете индексированный элемент, общий индекс уменьшается.

Большая часть этого всего цикла. Это очень многословный набор кода, и вы можете свернуть его, чтобы быть намного меньше. Этот код проходит через каждую серию в вашей диаграмме, и предполагается, что у вас есть только одна точка за серию. Затем он проверяет, является ли значение этой единственной точки равным 0. Если мы добавим индекс этой серии в массив removeIndex. Следующий цикл проходит через массив removeIndex и фактически удаляет серию. Live demo.

+0

Благодарим за быстрый ответ. Извините, но я ищу способ воспроизвести поведение из диаграммы 1 (пончик) на диаграмму 2 (3d-бары). Диаграмма пончика автоматически скрывает нулевые значения (данные и метки). – thiago

+0

Он скрывает значения, потому что диаграмма pie/donut получает свои значения точек (радиус среза) в зависимости от общего количества всех точек. Для каждой точки он получает процент от этого «реального» значения как форму процента от общего числа. Поскольку 0 значений 0% от пирога/пончика, у него нет среза.Невозможно сделать это с другими типами диаграмм непосредственно внутри диаграмм. – wergeld

+0

Вопрос ответил. Спасибо. Я думал, что это возможно, но ваше объяснение убедило меня. – thiago

Смежные вопросы