Изменить размер точек надстройки на мобильном телефоне

Question

Я хочу, чтобы точки моего графика были больше на мобильном телефоне, чтобы их было легче нажимать. Они установлены как круги с радиусом 4 в моем файле javascript, но я хочу установить их с радиусом 8, когда размер окна ниже 500 пикселей.

Вот скрипка: http://jsfiddle.net/593rknnv/. Я знаю, что я неправильно нацелен на пункты здесь, но у меня эта проблема решена в моем собственном коде. Как вы можете видеть, при изменении размера окна точки меняют цвет, но я не знаю, какой атрибут изменится, чтобы повлиять на размер.

Мой реальный код:

@media(max-width: 500px){ 
    html{ 
     background-color: blue !important; 
    } 
    #container { 
     width: 1200px !important; 
    } 

    g.highcharts-markers.highcharts-tracker path{ 
     fill: blue !important; 
     radius: 10; 
    } 
} 

Answer 1

Вот что вы можете сделать:

$(window).resize(function() { 
    var chart = $('#container').highcharts(); 
    if ($(window).width() < 500) {   
     chart.options.plotOptions.spline.marker.radius = 8; 
     chart.series[0].update(); 
    } 
    else { 
     chart.options.plotOptions.spline.marker.radius = 4; 
     chart.series[0].update(); 
    } 
}); 

Вы должны изменить plotOptions.spline.marker.radius до 8 вариантов диаграмм, а не в CSS. $(window).resize проверяет каждое изменение размера страницы, а затем устанавливает радиус маркеров соответствующим образом. DEMO