javascript - 在移动设备上更改 highcharts 点的大小

Question

我希望我的图表中的点在移动设备上更大，以便更容易点击。它们在我的 javascript 文件中设置为半径为 4 的圆，但当窗口大小低于 500px 时，我想将它们设置为半径为 8。

这是一个 fiddle :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