highcharts:当我使用两个图表togheder

时间:2019-12-22 13:08:36

标签: highcharts

将鼠标悬停在空白区域之前

enter image description here

在空白处悬停之后

enter image description here

它同时包含两个图表。 当我将鼠标移到空白处时,底部的图表变得模糊。我不希望悬停发生任何事情。 我在互联网上搜索了很多不活跃内容,然后将其悬停为false,但是没有。

这是我的图表信息:

Highcharts.chart('stock-trading-process', {
                title: {
                    text: ''
                },
                tooltip: {
                    enabled: false
                },
                xAxis: {
                    labels: {
                        enabled: false
                    },
                    visible: false
                },
                chart: {
                    backgroundColor: 'gray',
                    margin: [0, 0, 0, 0]
                },
                yAxis: [{
                    gridLineWidth: 0,
                    title: {
                        text: ''
                    },
                    labels: {
                        enabled: false
                    },
                    height: '50%',
                    lineWidth: 2,
                }, {
                    gridLineWidth: 0,
                    labels: {
                        enabled: false
                    },
                    title: {
                        text: ''
                    },
                    top: '50%',
                    height: '50%',
                    offset: 0,
                    lineWidth: 2
                }],
                series: [{
                    type: 'line',
                    showInLegend: false,
                    color: '#00B1FC',
                    data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 6, 3, 2, 4, 6, 3, 1, 1],
                    marker: {
                        enabled: false,
                        states: {
                            hover: {
                                enabled: false
                            },
                            inactive: {
                                opacity: 1
                            }
                        }
                    },
                    states: { hover: 'none' },
                    fillColor: '#F7F8FA'
                }, {
                    type: 'column',
                    color: '#94E3FD',
                    pointWidth: 1,
                    showInLegend: false,
                    marker: {
                        enabled: true,
                        states: {
                            hover: {
                                enabled: true
                            },
                            inactive: {
                                opacity: 1
                            }
                        }
                    },
                    data: [1, 8, 6, 7, 4, 5, 9, 3, 2, 1, 7, 8, 5, 1, 2, 5, 9],
                    yAxis: 1,
                    states: { hover: 'none' }
                }],
                exporting: {
                    enabled: true
                },
                credits: {
                    enabled: false
                },
                navigation: {
                    buttonOptions: {
                        enabled: false
                    }
                }
            });

2 个答案:

答案 0 :(得分:0)

据我了解,您正在寻找系列对象上的 states.inactive.opacity 为1。

states: {
    inactive: {
      opacity: 1
    }
},

演示:https://jsfiddle.net/BlackLabel/en5j4v31/

API:https://api.highcharts.com/highcharts/series.line.states.inactive.opacity

我是对的吗?如果没有,您能否更准确地描述您的想法?

答案 1 :(得分:0)

为什么它对我不起作用?

演示:https://jsfiddle.net/3uzfqs4m/

{
        yAxis: [{
            visible: false,
            gridLineWidth: 0,
            title: {
                text: ''
            },
            labels: {
                enabled: false
            },
            height: '50%',
            lineWidth: 2,
        }, {
            visible: false,
            gridLineWidth: 0,
            labels: {
                enabled: false
            },
            title: {
                text: ''
            },
            top: '50%',
            height: '50%',
            offset: 0,
            lineWidth: 2
        }],
        series: [{
            type: 'line',
            showInLegend: false,
            color: '#00B1FC',
            data: [50, 15, 8, 25, 84, 74, 26, 54, 29, 35, 9, 15, 17, 18, 54, 26, 34, 27, 26, 18, 57, 24, 35, 16, 24, 25, 27],
            marker: {
                enabled: false,
                states: {
                    hover: {
                        enabled: false
                    },
                    inactive: {
                        opacity: 1
                    }
                }
            },
            states: {
                inactive: {
                  opacity: 1
              }
            },
            states: { hover: 'none' },
            fillColor: '#F7F8FA'
        }, {
            type: 'column',
            color: '#94E3FD',
            pointWidth: 1,
            showInLegend: false,
            marker: {
                enabled: true,
                states: {
                    hover: {
                        enabled: true
                    },
                    inactive: {
                        opacity: 1
                    }
                }
            },
            states: {
                inactive: {
                  opacity: 1
              }
            },
            data: [50, 15, 8, 25, 84, 74, 26, 54, 29, 35, 9, 15, 17, 18, 54, 26, 34, 27, 26, 18, 57, 24, 35, 16, 24, 25, 27],
            yAxis: 1,
            states: { hover: 'none' }
        }],
        chart: {
            backgroundColor: '#F4F7FA',
            margin: [0, -5, 0, -5]
        },
        title: {
            text: ''
        },
        tooltip: {
            enabled: false
        },
        xAxis: {
            labels: {
                enabled: false
            },
            visible: false
        },
        exporting: {
            enabled: true
        },
        credits: {
            enabled: false
        },
        navigation: {
            buttonOptions: {
                enabled: false
            }
        }
    }