Highcharts - 工具提示的悬停事件处理抛出异常

Posted 2021-04-02

Angular 2+用于使用Highcharts的巨大Spring MVC应用程序的新部分。之后，高角度图表（angular-highcharts）被添加到用angular 2+技术编写的新组件中。两侧都使用相同的Highcharts 6版本。 （Originaly Highcharts 4用于遗留应用程序）。

在角度零件图表中按预期工作，但在遗留应用程序中，图表使用意外样式呈现，并且工具提示的悬停事件例外：

zone.js:195 Uncaught TypeError: Cannot read property 'hover' of undefined
    at e.markerAttribs (highcharts.js:306)

Angular尝试处理遗留应用程序中的事件。

如何确保Highcharts在Web应用程序的两个部分中共存？没有冲突，加倍的Highcharts加载。

== 更新： 发现当传统的highcharts选项打开时，抛出工具提示呈现的异常。抛出异常：

highcharts.src.js:27770 Uncaught TypeError: Cannot read property 'hover' of undefined
at object.markerAttribs (highcharts.src.js:27770)
highcharts.src.js:27770 Uncaught TypeError: Cannot read property 'hover' of undefined
at object.markerAttribs (highcharts.src.js:27770)

highcharts.src.js：27770 => states在seriesStateOptions = seriesMarkerOptions.states[state];中未定义

选项：

Highcharts.theme = {
colors: ["#FFB900",
    "#FF9100",
    "#FF6900",
    "#FF4100",
    "#FF1900",
    "#FFB900",
    "#FF9100",
    "#FF6900",
    "#FF4100",
    "#FF1900",
    "#FFB900",
    "#FF9100",
    "#FF6900",
    "#FF4100",
    "#FF1900",
    "#FFB900",
    "#FF9100",
    "#FF6900",
    "#FF4100",
    "#FF1900",
    "#1C468E"
],
sandColors: [
    "#f45b5b",
    "#8085e9",
    "#8d4654",
    "#7798BF",
    "#aaeeee",
    "#ff0066",
    "#eeaaee",
    "#55BF3B",
    "#DF5353",
    "#7798BF",
    "#aaeeee"
],
darkColors: [
    "#DDDF0D",
    "#55BF3B",
    "#DF5353",
    "#7798BF",
    "#aaeeee",
    "#ff0066",
    "#eeaaee",
    "#55BF3B",
    "#DF5353",
    "#7798BF",
    "#aaeeee"
],
skiesColors: [
    "#514F78",
    "#42A07B",
    "#9B5E4A",
    "#72727F",
    "#1F949A",
    "#82914E",
    "#86777F",
    "#42A07B"
],
grayColors: [
    "#DDDF0D",
    "#7798BF",
    "#55BF3B",
    "#DF5353",
    "#aaeeee",
    "#ff0066",
    "#eeaaee",
    "#55BF3B",
    "#DF5353",
    "#7798BF",
    "#aaeeee"
],
chart: {
    backgroundColor: '#FFFFFF',
    borderWidth: 0,
    plotBackgroundColor: null,
    plotShadow: false,
    plotBorderWidth: 0,
    spacingTop: 0,
    spacingBottom: 0,
    spacingLeft: 0,
    spacingRight: 0,
    style: {
        fontFamily: 'Arial, Helvetica, sans-serif'
    }
},
title: {
    align: 'left',
    style: {
        color: '#000000',
        fontWeight: 'bold',
        fontSize: '12px'
    }
},
subtitle: {
    align: 'left',
    style: {
        color: '#B1B1B1',
        fontWeight: 'normal',
        fontSize: '12px'
    }
},
xAxis: {
    gridLineWidth: 0,
    lineColor: '#999999',
    tickColor: '#999999',
    labels: {
        style: {
            color: '#666666',
            fontWeight: 'normal',
            fontSize: '12px'
        }
    },
    title: {
        style: {
            color: '#666666',
            fontWeight: 'normal',
            fontSize: '12px'
        }
    }
},
yAxis: {
    alternateGridColor: null,
    minorTickInterval: null,
    gridLineWidth: 1,
    gridLineColor: '#DEDEDE',
    lineWidth: 0,
    tickWidth: 0,
    labels: {
        style: {
            color: '#F2670C',
            fontWeight: 'normal',
            fontSize: '12px'
        }
    },
    title: {
        style: {
            color: '#666666',
            fontWeight: 'normal',
            fontSize: '12px'
        }
    },
    stackLabels: {
        style: {
            fontWeight: 'bold',
            fontSize: '12px',
            color: '#F2670C'
        },
        formatter: function () {
            if (this.total != 0) {
                return Highcharts.numberFormat(this.total, 0, ',', '.');
            }
        }
    }
},
legend: {
    layout: 'vertical',
    align: 'left',
    verticalAlign: 'bottom',
    backgroundColor: '#FFFFFF',
    borderWidth: 0,
    borderColor: '#FFFFFF',
    symbolPadding: 8,
    symbolWidth: 16,
    itemStyle: {
        color: '#333333',
        fontWeight: 'normal',
        fontSize: '11px',
        lineHeight: '11px'
    },
    itemHoverStyle: {
        color: '#F2670C'
    },
    itemHiddenStyle: {
        color: '#CCCCCC'
    }
},
labels: {
    style: {
        color: '#666666'
    }
},
tooltip: {
    backgroundColor: '#FFFFFF',
    borderWidth: 2,
    style: {
        color: '#333333',
        fontWeight: 'normal',
        fontSize: '12px',
        lineHeight: '16px'
    }
},
plotOptions: {
    line: {
        marker: {
            lineColor: '#333333'
        },
        dataLabels: {
            color: '#CCCCCC'
        }
    },
    spline: {
        marker: {
            lineColor: '#333333'
        },
        dataLabels: {
            color: '#CCCCCC'
        }
    },
    scatter: {
        marker: {
            lineColor: '#333333'
        },
        dataLabels: {
            color: '#CCCCCC'
        }
    },
    column: {
        marker: {
            lineColor: '#333333'
        },
        dataLabels: {
            color: '#CCCCCC'
        }
    },        
},
    toolbar: {
        itemStyle: {
            color: '#CCCCCC'
        }
    },
    navigation: {
        buttonOptions: {
            backgroundColor: {
                linearGradient: [0, 0, 0, 20],
                stops: [[0.4, '#606060'], [0.6, '#333333']]
            },
            borderColor: '#000000',
            symbolStroke: '#C0C0C0',
            hoverSymbolStroke: '#FFFFFF'
        }
    }

};

//应用主题var highchartsOptions = Highcharts.setOptions（Highcharts.theme）;

答案

它发生，因为column系列没有自己的marker对象，所以你不应该将它设置为默认选项（使用setOptions）。您需要删除这部分代码：

marker: {
    lineColor: '#333333'
}

来自您在主题定义中设置的plotOptions.column配置。然后它会正常工作。

实例：https://jsfiddle.net/sra1jg0k/