チャートのグリッド線を削除
Lib HighChartsの charts があり、作成するグラフのyAxisのグリッド線を削除したいgridLineWidth: 0しかし、グリッド線はすべてのコードを削除していません：
<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>
構成オブジェクトに触れたくない場合は、cssでグリッドを非表示にします。
.chart-container .highcharts-grid {
display: none;
}
言及された解決策はどれも私のために機能しなかったので、これは最終的に機能しました（スパークラインの例から： https://www.highcharts.com/demo/sparkline ）：
yAxis: {
startOnTick: false,
endOnTick: false,
tickPositions: [],
}
ここにある他のすべての線は私にとってはうまくいきました。色が唯一の解決策であるため、線の透明度を使用する場合もありました。
$(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
}