Question

我做了响应式Meteogram，但是当浏览器窗口放大时，图标（云，太阳）不会移动。如何解决这个问题？

[http://jsfiddle.net/fsrqvn9f/2/][1]

Answer 1

您没有告诉图表移动这些项目。您需要为图表重绘事件添加处理程序：

   chart: {
        renderTo: this.container,
        marginBottom: 70,
        marginRight: 40,
        marginTop: 50,
        plotBorderWidth: 1,
        events: {
            redraw: function () {
                // remove chart annotations
                meteogram.onChartLoad(meteogram.chart);
            }
        }
    },

我没有编写代码来删除注释，但您也需要实现它。我建议将它们添加到一个组中，这样您就可以立即将它们全部删除。

http://jsfiddle.net/fsrqvn9f/4/

编辑 - 删除图标。

这是您要删除天气图标的方法。你需要为Wind箭头做类似的事情。

将图标添加到图表时，请将它们添加到命名组中。在这种情况下，我将组命名为weatherSymbols。 highcharts将使用类highcharts-weatherSymbols（或＆＃39; highcharts - ＆＃39; + grouname）创建元素。通过这种方式，您可以轻松找到这些项目以便以后删除它们：

        // Create a group element that is positioned and clipped at 30 pixels width and height
        group = chart.renderer.g('weatherSymbols')
            .attr({
                translateX: point.plotX + chart.plotLeft - 15,
                translateY: point.plotY + chart.plotTop - 30,
                zIndex: 5
            })

然后删除它们就像：

    events: {
        redraw: function () {
            // remove chart annotations
            $('.highcharts-weatherSymbols').remove();
            meteogram.onChartLoad(meteogram.chart);
        }
    }

响应式meteogram（图标）highcharts

1 个答案: