web-dev-qa-db-ja.com

チャートのグリッド線を削除

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>
21
Ilya Z.

問題はgridLineWidthではありません。あなたはそれを正しく設定しました。

さらに、minorGridLineWidthを設定する必要があります0

実用デモ

34
Horen

構成オブジェクトに触れたくない場合は、cssでグリッドを非表示にします。

.chart-container .highcharts-grid {
   display: none;
}
4
Iran Reyes

言及された解決策はどれも私のために機能しなかったので、これは最終的に機能しました(スパークラインの例から: https://www.highcharts.com/demo/sparkline ):

yAxis: {
    startOnTick: false,
    endOnTick: false,
    tickPositions: [],
}
2
darklow

ここにある他のすべての線は私にとってはうまくいきました。色が唯一の解決策であるため、線の透明度を使用する場合もありました。

$(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

http://jsfiddle.net/fv50sLkj/23/

1
IzzakActive
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
}
1
alfishan aqeel