Question

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

这是一个小提琴：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

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

1 个答案: