Высокие диаграммы с угловым, удаление линии xAxis

Я использую highcharts, и я сделал директиву, называемую sparkLine, вот ее код:

chartModule.directive('sparkLine', function () {
return {
 restrict: 'E',
 scope: {
 series: '=',
 lineName: '=',
 lineTooltip: '=',
 xAxisEnabled: '=',
 yAxisEnabled: '=',
 lineColor: '='
 },
 replace: true,
 template: '',

 link: function (scope, element, attrs) {

 var xEnable = (typeof (attrs.xAxisEnabled) == 'undefined') ? false : true;
 var ******* = (typeof (attrs.yAxisEnabled) == 'undefined') ? false : true;
 var lColor = (typeof (attrs.lineColor) == 'undefined') ? '#808080' : lineColor;

 $(element).highcharts({
 chart:
 {
 type: 'line',
 width: attrs.width,
 height: attrs.height,
 backgroundColor: attrs.backgroundColor
 },
 title: {
 text: ''
 },
 plotOptions: {
 series: {
 marker: {
 radius: (typeof (attrs.pointRadius) == 'undefined') ? 2 : attrs.pointRadius,
 }
 }
 },
 navigation: {
 buttonOptions: {
 enabled: false
 }
 },
 credits: {
 enabled: false
 },

 xAxis: {
 lineColor: 'transparent',
 tickWidth: 0,
 lineHeight: 0,
 labels: {
 enabled: xEnable
 },
 categories: []
 },
 yAxis: {
 lineColor: 'transparent',
 gridLineColor: 'trasparent',
 title: {
 text: ''
 },
 labels: {
 enabled: *******
 },
 plotLines: [{
 value: 0,
 width: 1,
 color: lColor
 }]
 },
 tooltip: {
 formatter:
 function () {
 return scope.lineTooltip(this.x, scope.lineName, this.y.toLocaleString());
 },
 hideDelay: 50
 },
 legend: {
 enabled: false
 },
 series: [{
 name: '',
 data: []
 }]
 });

 scope.$watch('series', function () {
 var chart = $(element).highcharts();
 scope.newperiodsTrends = [];
 scope.categoriesPeriods = [];
 angular.forEach(scope.series, function (elm, index) {
 scope.newperiodsTrends.push(elm.Value);
 scope.categoriesPeriods.push(elm.IterationName);
 });

 chart.series[0].setData(scope.newperiodsTrends);
 chart.xAxis[0].setCategories(scope.categoriesPeriods);
 });
 }
}

});

использование этой директивы в моем коде:


в моем html-коде я использую angularjs, и я создал таблицу с помощью ng-repeat:

моя проблема в том, что я не могу удалить xAxis с одного из графиков.

EDIT: я нашел проблему: когда я удалил высоту и ширину, которые включены внутри файла css (class= "sparkLine"), линия была удалена, возможно, это был высокий уровень глюков... если есть решение для этого, я бы очень очень нравится слышать об этом спасибо

1 ответ

Что касается Highcharts, вы можете удалить ось, используя Axis.remove - API.

Если вы хотите скрыть это от просмотра, вы делаете это правильно, если

xAxis: {
 ... 
 lineWidth: 0,
 minorGridLineWidth: 0,
 lineColor: 'transparent',
 ... 
 labels: {
 enabled: false
 },
 minorTickLength: 0,
 tickLength: 0
}

источник

Например, пример jsFiddle очень полезен для определения происхождения нежелательной серой линии.

licensed under cc by-sa 3.0 with attribution.