Chartist.js удалить этикетки?

Question

Таким образом, я могу display:none этикетки ex. ниже с помощью css, но моя .ct-диаграмма все еще имеет что-то слева и внизу диаграммы ex. ниже.

.ct-labels, .ct-grids { 
    display: none; 
} 

В идеале синий график заканчивается слева от белого модуля и вниз на дне, так что он совпадает с DIV, он позиционируется абсолютно и графики отзывчивость на. Я предполагаю, что пустое пространство создано из ярлыков, существующих в DOM?

Я хотел бы иметь диаграмму не показывая пустое пространство слева и снизу. Мой .ct-chart css выглядит так.

.ct-chart { 
position: absolute; 
width: 100%; 
left: 0; 
top: 0; 
height: 100%; 
padding: 0; 
z-index: -1; 
} 

Answer 1

Да, это элементы svg с смещениями значений x и y. См. Здесь пример http://gionkunz.github.io/chartist-js/examples.html Элементы в < g class = "ct-labels"> </g> все имеют заданное смещение x и y, которое отводит их от родительского элемента. Было бы довольно просто переопределить эти значения с помощью d3 после загрузки диаграммы.

Answer 2

Если вы не хотите иметь ярлыки на всех, без линий сетки и удалить все смещения и отступы вы можете сделать это, но это требует совсем немного конфигурации:

var chart = new Chartist.Line('.ct-chart', { 
    labels: [1, 2, 3, 4], 
    series: [ 
    [1, 4, 2, 5], 
    [2, 3, 1, 4] 
    ] 
}, { 
    showPoint: false, 
    showLine: false, 
    showArea: true, 
    fullWidth: true, 
    showLabel: false, 
    axisX: { 
    showGrid: false, 
    showLabel: false, 
    offset: 0 
    }, 
    axisY: { 
    showGrid: false, 
    showLabel: false, 
    offset: 0 
    }, 
    chartPadding: 0, 
    low: 0 
}); 

http://jsbin.com/patela/1/edit?html,css,js,output

Answer 3

Когда я загружаю диаграмму, мне нравится проверять ширину диаграммы и количество меток, и, если нужно, я либо показываю метки, только отображаю каждую другую метку, либо спрячу все метки на основе соответствия меток. Этот код скрывает метки:

setTimeout(function() { 
    $('#ssh-chart .ct-chart').find('.ct-labels .ct-horizontal').remove(); 
}, 100);