响应式气象图(图标)高图

Question

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

[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/

编辑 - 删除图标。

以下是删除天气图标的方法。 您需要对风箭头执行类似操作。

将图标添加到图形时，请将它们添加到命名组中。 在本例中，我将组命名为天气符号。 Highcharts将使用类Highcharts-weatherSymbols（或"highcharts-"+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);
        }
    }