2014-10-15 2 views
1

У меня возникли проблемы с удалением нулей (точечных таблиц) в гистограмме, состоящей из Jqplot. Я попробовал «hideZero», но он вообще не работает.Удаление таблиц с нулевыми значениями на столбчатой ​​гистограмме Jqplot

Graph with zeros

Я пробовал разные вещи; не уверен, что случилось. Я импортировал следующие пакеты:

jqplot.barRenderer.min.js 
jqplot.canvasAxisLabelRenderer.min.js 
jqplot.canvasAxisTickRenderer.min.js 
jqplot.canvasTextRenderer.min.js 
jqplot.categoryAxisRenderer.min.js 
jqplot.pointLabels.min.js 
jquery-2.0.3.js 
jquery.jqplot.min.css 
jquery.jqplot.min.js 

Вот JavaScript:

var s3 = [11, 28, 22, 47, 11, 11]; 
var s1 = [0, 6, 3, 0, 0, 0]; 
var s2 = [1, 0, 3, 0, 0, 0]; 
var dataArray = [s3, s1, s2]; 
var ticks = ['John', 'Tumm', 'Wen', 'Ken', 'Dolly']; 

var options = { 
    title: 'Title ', 
    stackSeries: true, 
    seriesColors: ["#eb4b3d", "#ffc800", "#009149"], 
    seriesDefaults: { 
     renderer: $.jqplot.BarRenderer, 
     pointLabels: { 
      show: true 
     }, 
     rendererOptions: { 
      barWidth: 25, 
      varyBarColor: true, 
     }, 
    }, 
    axes: { 
     xaxis: { 
      // renderer: $.jqplot.CategoryAxisRenderer, 
      // 
      renderer: $.jqplot.CategoryAxisRenderer, 
      ticks: ticks, 
     }, 
     yaxis: { 
      //autoscale: true, 
      //label: 'Application Count', 
      min: 0, 
      tickInterval: 5, 
      max: 50 
     } 
    }, 
    axesDefaults: { 
     tickRenderer: $.jqplot.CanvasAxisTickRenderer, 
     tickOptions: { 
      angle: -30, 
      fontSize: '10pt' 
     } 
    } 
}; 

var plot = $.jqplot('chartDivId', dataArray, options); 

HTML:

<div id="chartDivId"/> 

Существует JSFiddle of this problem.

ответ

2

Лучшее место для поиска документации о том, как это сделать, это API Documentation. Он имеет документацию по каждому компоненту и плагину, а также варианты, доступные для каждого. [Пересмотрено здесь и в верхней части ответа, потому что я только что добавил ссылку.]

Документация для меток точек содержится в документации API плагина для: PointLabels (плагины/jqplot.pointLabels.js).

Вы можете удалить метки нулевого значения, добавив свойство hideZeros: true. Это означает, что изменение:

 pointLabels: { 
      show: true, 
     }, 

к:

 pointLabels: { 
      show: true, 
      hideZeros: true 
     }, 

Существует working JSFiddle.

enter image description here

The полный JavaScript:

var s3 = [11, 28, 22, 47, 11, 11]; 
var s1 = [0, 6, 3, 0, 0, 0]; 
var s2 = [1, 0, 3, 0, 0, 0]; 
var dataArray = [s3, s1, s2]; 
var ticks = ['John', 'Tumm', 'Wen', 'Ken', 'Dolly']; 

var options = { 
    title: 'Title ', 
    stackSeries: true, 
    seriesColors: ["#eb4b3d", "#ffc800", "#009149"], 
    seriesDefaults: { 
     renderer: $.jqplot.BarRenderer, 
     pointLabels: { 
      show: true, 
      hideZeros: true 
     }, 
     rendererOptions: { 
      barWidth: 25, 
      varyBarColor: true, 
     }, 
    }, 
    axes: { 
     xaxis: { 
      // renderer: $.jqplot.CategoryAxisRenderer, 
      // 
      renderer: $.jqplot.CategoryAxisRenderer, 
      ticks: ticks, 
     }, 
     yaxis: { 
      //autoscale: true, 
      //label: 'Application Count', 
      min: 0, 
      tickInterval: 5, 
      max: 50 
     } 
    }, 
    axesDefaults: { 
     tickRenderer: $.jqplot.CanvasAxisTickRenderer, 
     tickOptions: { 
      angle: -30, 
      fontSize: '10pt' 
     } 
    } 
}; 

var plot = $.jqplot('chartDivId', dataArray, options); 

HTML:

<div id="chartDivId"/> 
+0

Спасибо !! Теперь работает. Первоначально свойство hideZeros не работало, потому что у меня был другой код, который переписывал эти свойства. –

0

Я использовал это решение для решить мою проблему с часами формата

pointLabels: { 
     show: true, 
     formatString: '%s', 
     formatter: function val(x, y) { 

      //my Solution 
      if (y != 0) 

       return y.toString().toHHMMSS(); 
     }, 
    }, 
Смежные вопросы