data - legend series highcharts
eliminar línea de cuadrícula en el gráfico (5)
Tengo los charts de lib HighCharts y quiero eliminar la línea de cuadrícula de yAxis en los cuadros que escribo gridLineWidth: 0 pero las líneas de cuadrícula no eliminan Todo el código:
<script type="text/javascript">
(function($){ // encapsulate jQuery
$(function() {
Highcharts.setOptions({
lang: {
rangeSelectorZoom: ''Маcштаб'',
rangeSelectorFrom: ''От'',
rangeSelectorTo: ''До'',
thousandsSep: '' ''
},
global: {
useUTC: false
}
});
$.getJSON(''http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?'', function(data) {
// Create the chart
window.chart = new Highcharts.StockChart({
chart : {
borderColor: ''white'',
renderTo : <?php echo "cont".$i; ?>,
backgroundColor: ''#f9f9f9'' // Сделаем слегка серый фон
},
rangeSelector: {
buttons: [
{
type: ''week'',
count: 1,
text: ''Неделя'',
},
{
type: ''month'',
count: 1,
text: ''Месяц'',
},
{
type: ''year'',
count: 1,
text: ''Год''
},
{
type: ''all'',
text: ''Всё''
}],
inputDateFormat: ''%d.%m.%Y'', // Меняем на привычный для нас формат даты в интервалах
inputEditDateFormat: ''%d.%m.%Y'',
buttonTheme: {
width: 43 // Увеличим ширину кнопки
},
selected: 1 // Какая кнопка выбрана по умолчанию
},
yAxis: [{
gridLineWidth: 0,
plotBands: [{
color: ''rgba(1, 143, 189, 1)'',
from: -2,
to: 11
},
{
color: ''rgba(157, 200, 5, 1)'',
from: 11,
to: 21
},
{
color: ''rgba(202, 1, 94, 1)'',
from: 21,
to: 50
}],
title: {
text: ''Позиции''
},
startOnTick: false,
// min: 1,
showFirstLabel: true,
showLastLabel: true,
reversed: true,
tickPositioner: function(min, max) {
// specify an interval for ticks or use max and min to get the interval
var interval = Math.round((max-min)/5);
// push the min value at beginning of array
var dataMin=this.dataMin;
var dataMax=this.dataMax;
var positions = [dataMin];
var defaultPositions = this.getLinearTickPositions(interval, dataMin, max);
//push all other values that fall between min and max
for (var i = 0; i < defaultPositions.length; i++) {
if (defaultPositions[i] > dataMin && defaultPositions[i] < dataMax) {
positions.push(defaultPositions[i]);
}
}
// push the max value at the end of the array
positions.push(dataMax);
return positions;
},
//changed min valuereversed: true
}],
navigator: {
enabled: false,
maskFill: ''rgba(255, 255, 255, 0.45)'',
//margin: 20,
series: {
type: ''areaspline'',
color: ''rgba(255, 255, 255, 0.00)'',
fillOpacity: 0.4,
dataGrouping: {
smoothed: false
},
lineWidth: 2,
lineColor: ''#e9cc00'',
marker: {
enabled: false
},
shadow: true
},
yAxis: {
reversed: true
}
},
xAxis : {
gridLineWidth: 0,
type: ''datetime'',
title : {
text : '' ''
},
},
title : {
//text : ''Позиции сайта''
},
legend: {
enabled: true,
align: ''center'',
itemWidth: 234, // указал ширину, чтобы выводились сайты в 4 колонки
verticalAlign: ''top''
},
series : [{
lineColor: ''white'',
name : ''Позиция в яндексе'',
id : ''dataseries'',
data : <?php echo $d ?>,
tooltip: {
backgroundColor: ''rgba(250, 250, 250, .85)'', // Фон немного темнее
borderColor: ''rgba(100, 100, 100, .90)'', // Цвет границы (по умолчанию меняется автоматом)
xDateFormat: ''%d.%m.%Y %H:%M'', // Наш формат даты
// Тут немного увеличиваем размер даты
headerFormat: ''<span style="font-size: 12px">{point.key}</span><br/>'',
// Формат надписей в подсказке, названия цветом графика, а значения жирным
pointFormat: ''<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>'',
//valueDecimals: 2
}
}]
});
});
});
})(jQuery);
</script>
El problema no es el gridLineWidth . Lo has configurado correctamente.
Además, debe establecer el minorGridLineWidth que debe establecer en 0
Ninguna de las soluciones mencionadas funcionó para mí, así que esta finalmente funcionó (tomado de los ejemplos de Sparklines: https://www.highcharts.com/demo/sparkline ):
yAxis: {
startOnTick: false,
endOnTick: false,
tickPositions: [],
}
Si no desea tocar el objeto de configuración, simplemente oculte la cuadrícula por css:
.chart-container .highcharts-grid {
display: none;
}
para todas las demás líneas aquí es lo que funcionó para mí, en algunos casos, el uso de la transparencia de línea como el color fue la única solución que pude encontrar.
$(function() {
$(''#container'').highcharts({
colors: [''#00f900'', ''#ffff3c'', ''#ff2600''],
credits: {
enabled: false
},
exporting: {
enabled: false
},
legend: {
itemDistance: 60
},
lineColor: ''red'',
chart: {
type: ''column'',
backgroundColor: ''transparent''
},
title: {
text: ''''
},
legend: {
itemStyle: {
color: ''white'',
fontWeight: ''normal'',
fontFamily: ''helvetica'',
fontSize: ''12px''
}
}
// ....rest in js fiddle
you just need to gridLineWidth set to 0
yAxis: {
min:0,
categories: ["","Low","Medium","High"],
tickWidth: 0,
crosshair: false,
lineWidth: 0,
gridLineWidth:0,//Set this to zero
title: '''',
labels: {
formatter: function () {
return this.value;labels
}
},
showEmpty: false
}