2012-06-01 3 views
0

У меня этот график. У меня есть сетка, и я хочу вставлять в каждую строку этот график. Проблема заключается в том, что, как вы видите, есть небольшая строка слева, кажется, что эта линия является осью графика. Мне нужно удалить его не только из-за визуального аспекта, но и потому, что ось увеличивает высоту ячейки сетки.Снять ось линии с графического изображения высокой четкости

Заранее благодарен!

<script src="http://code.highcharts.com/highcharts.js"></script> 

<div id="container" style="min-width: 400px; height: 100px; margin: 0 auto"></div> 
    ​ 
var chart; 
$(document).ready(function() { 
    chart = new Highcharts.Chart({ 
     chart: { 
      backgroundColor: null, 
      renderTo: 'container', 
      type: 'bar', 
     }, 
     title: { 
      text: '' 
     }, 
     xAxis: { 
      gridLineWidth: 0, 
      enabled: false, 
      categories: [''], 
      labels: { 
       enabled: false 
      } 
     }, 
     yAxis: { 
      enabled: false, 
      gridLineWidth: 0, 
      lineWidth: 0, 
      min: 0, 
      title: { 
       text: '' 
      }, 
      labels: { 
       enabled: false 
      } 
     }, 
     legend: { 
      enabled: false, 
     }, 
     tooltip: { 
      formatter: function() { 
       return ''+ 
        this.series.name +': '+ this.y +''; 
      } 
     }, 
     credits: 
     { 
      enabled: false, 
      position: 
      { 
       align: 'left', 
       x: 10 
      } 
     }, 
     plotOptions: { 
      series: { 
       stacking: 'normal' 
      } 
     }, 
     series: [ { 
      name: 'Clicks', 
      data: [2] 
     }, { 
      name: 'Distributed Points', 
      data: [3] 
     }], 
     exporting: 
     { 
      enabled: false 
     } 
    }); 
}); 
​ 

+0

Вы пытались установить свойство рендеринга элемента для отображения: none; ? –

+0

Я не совсем понял, что вы имеете в виду, предоставляя свойство. Но если я устанавливаю отображение: ни один в html я не могу скрыть ось, но высота компонента остается той же (высота компонента должна быть только высотой графика). – Thiago

+0

О, хорошо. Вот JSFiddle, с которым я работаю, чтобы изучить этот вопрос. http://jsfiddle.net/JEGGf/1/ SVG-рендеринг ... Я не вижу никаких результатов, которые все еще играют в API. http://www.highcharts.com/ref/#chart-object –

ответ

1

Is this what you are after? enter image description here

Я поставил XAxis lineWidth: 0, а затем после того, как сюжет рисуется:

$('.highcharts-axis').css('display','none'); 

EDIT:

Если вы установите tickWidth: 0, вы можете удалить все следы линий оси без использования CSS-вызов.

Revved fiddle here.

+1

Я надеялся дать Тиаго ответ, встроенный в API. Проблема с переопределением стилей заключается в том, что не гарантируется, что взлом css будет сохраняться при обновлении SVG. Также вы оказываетесь на скользком склоне, чтобы убедиться, что ваша обертка правильно работает с сторонним инструментом на протяжении всего жизненного цикла продукта. –

+0

Как сказал Кристофер, я искал решение с использованием API. – Thiago

+0

Но я посмотрел ваш пример. Хотя ось исчезла, элемент 'svg' сохраняет ту же высоту, и в этом случае высокие диаграммы также увеличивают высоту ячейки. – Thiago

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