2013-07-09 4 views
1

При построении линейной диаграммы, где имеются значения, равные значению yAxis.min, линия скрыта под осью X.Highcharts - Как заставить линейную диаграмму быть видимой над осью X

У меня есть минимум по оси Y устанавливается в 0 и набор данных содержит нули

Вот пример:

$(function() { 
     $('#container').highcharts({ 
      xAxis: { 
       categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
      }, 
      yAxis: { 
       min: 0, 
       max: 100 
      }, 
      series: [{ 
       name: 'Tokyo', 
       data: [7.0, 6.9, 0, 0, 0, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] 
      }] 
     }); 
    }); 

http://jsfiddle.net/egQH8/1/

Если я увеличиваю значения сказать 0.2, вы можно просто увидеть, что линия начинает появляться: http://jsfiddle.net/2RCdV/1/

Есть ли что-нибудь, что я могу сделать, чтобы обойти это?

ответ

4

Снимите min: 0 и добавьте startOnTick: false.

Это сделает Highcharts автоматически вычисляющим значение min, и поскольку он больше не начинается с отметки, он будет рисовать линию 0 yAxis всего на несколько пикселей выше xAxis.

См. Пробег here.

+0

отлично работает, спасибо большое! – wheelibin

+0

Он отлично работает, если вы не установили толщину линии 4, например: http://jsfiddle.net/zL96uanu/. Как мы исправим для этого случая? –

+1

@ elise-chant: Я не тронул HighCharts через несколько лет, поэтому, думаю, я не могу помочь вам в этом. Так как кажется, что рисунок 2px выше линии сетки, а остальная часть (ниже его) отключена, возможно, вы можете «взломать» ее, добавив 'min' в' yAxis', но установив его на '-0.5' или аналогичный , Кроме этого ... не знаю, извините. – ssarabando

0

мы исправили это, как это для 4PX линий:

// This fixes the "thin lines at top & bottom of chart" bug 
Highcharts.wrap(Highcharts.Chart.prototype, 'setChartSize', function (proceed) { 
    proceed.apply(this, [].slice.call(arguments, 1)); 
    if (includes(['line','spline'], get(this, 'options.chart.type'))) { 
    this.clipBox.height += 6; 
    this.clipBox.y -= 3; 
    } 
}); 
Смежные вопросы