Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

highcharts - How can I disable the disappearance animation?

I need to disable animation so that when I switch to another chart the tooltip on the previous chart will instantly disappear. I am attaching a photo and my code.

Image

`document.addEventListener('DOMContentLoaded', function() {
Highcharts.chart('cpu_container', {
    title: {
        text: null
    },
    chart: {
        backgroundColor: null,
        height: 100
    },
    xAxis: {
        type: null,
        visibility: false,
        labels: {
            enabled: false
        },
    },
    yAxis: {
        gridLineColor: null,
        visibility: false,
        title: {
            text: null
        },
        labels: {
            enabled: false
        }
    },
    legend: {
        enabled: false
    },
    colors: ['#0000FF', '#0066FF', '#00CCFF'],
    plotOptions: {
        series: {
            color: '#B469FF',
            borderWidth: 0,

            states: {
                inactive: {
                    enabled: false,
                },
                stickyTracking: false,
            }
        },
        area: {
            fillColor: {
                linearGradient: {
                    x1: 0,
                    y1: 0,
                    x2: 1,
                    y2: 1
                },
                stops: [
                    [0, 'rgba(180, 105, 255, 0.5)'],
                    [1, 'rgba(180, 105, 255, 0.05)']
                ]
            },
            lineWidth: 1,
            states: {
                hover: {
                    lineWidth: 1
                }
            },
            threshold: null
        }
    },
    credits: {
        enabled: false
    },
    tooltip: {
        formatter: function (d) {
            var rV = "<p style='font-size: 10px; color: #8E9092;'>21.01.2021, 16:00</p><br>";
            rV += '<p style="font-size: 16px; color: #fff; margin-top: 2px;">56,11%</p>';
            return rV;
        },
        backgroundColor: "#373A41",
        borderWidth: 0,
    },
    series: [{
        type: 'area',
        name: 'EUR',
        data: [30, 50, 70, 20],
    }]
});
Highcharts.chart('ram_container', {
    title: {
        text: null
    },
    chart: {
        backgroundColor: null,
        height: 100,
    },
    xAxis: {
        type: null,
        visibility: false,
        labels: {
            enabled: false
        },
    },
    yAxis: {
        gridLineColor: null,
        visibility: false,
        title: {
            text: null
        },
        labels: {
            enabled: false
        }
    },
    legend: {
        enabled: false
    },
    colors: ['#0000FF', '#0066FF', '#00CCFF'],
    plotOptions: {
        series: {
            color: '#B469FF',
            borderWidth: 0,

            states: {
                inactive: {
                    enabled: false,
                },
                stickyTracking: false,
            }
        },
        area: {
            fillColor: {
                linearGradient: {
                    x1: 0,
                    y1: 0,
                    x2: 1,
                    y2: 1
                },
                stops: [
                    [0, 'rgba(180, 105, 255, 0.5)'],
                    [1, 'rgba(180, 105, 255, 0.05)']
                ]
            },
            lineWidth: 1,
            states: {
                hover: {
                    lineWidth: 1
                }
            },
            threshold: null
        }
    },
    credits: {
        enabled: false
    },
    tooltip: {
        formatter: function (d) {
            var rV = "<p style='font-size: 10px; color: #8E9092;'>21.01.2021, 16:00</p><br>";
            rV += '<p style="font-size: 16px; color: #fff; margin-top: 2px;">56,11%</p>';
            return rV;
        },
        backgroundColor: "#373A41",
        borderWidth: 0,
    },
    series: [{
        type: 'area',
        name: 'EUR',
        data: [30, 50, 70, 20],
    }]
});
Highcharts.chart('new_users_container', {
    title: {
        text: null
    },
    chart: {
        backgroundColor: null,
        height: 100
    },
    xAxis: {
        type: null,
        visibility: false,
        labels: {
            enabled: false
        },
    },
    yAxis: {
        gridLineColor: null,
        visibility: false,
        title: {
            text: null
        },
        labels: {
            enabled: false
        }
    },
    legend: {
        enabled: false
    },
    colors: ['#0000FF', '#0066FF', '#00CCFF'],
    plotOptions: {
        series: {
            color: '#B469FF',
            borderWidth: 0,

            states: {
                inactive: {
                    enabled: false,
                },
                stickyTracking: false,
            }
        },
        area: {
            fillColor: {
                linearGradient: {
                    x1: 0,
                    y1: 0,
                    x2: 1,
                    y2: 1
                },
                stops: [
                    [0, 'rgba(180, 105, 255, 0.5)'],
                    [1, 'rgba(180, 105, 255, 0.05)']
                ]
            },
            lineWidth: 1,
            states: {
                hover: {
                    lineWidth: 1
                }
            },
            threshold: null
        }
    },
    credits: {
        enabled: false
    },
    tooltip: {
        formatter: function (d) {
            var rV = "<p style='font-size: 10px; color: #8E9092;'>21.01.2021, 16:00</p><br>";
            rV += '<p style="font-size: 16px; color: #fff; margin-top: 2px;">56,11%</p>';
            return rV;
        },
        backgroundColor: "#373A41",
        borderWidth: 0,
    },
    series: [{
        type: 'area',
        name: 'EUR',
        data: [30, 50, 70, 20],
    }]
});
});`

JsFiddle - https://jsfiddle.net/ay1m4cxp/


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
等待大神答复

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...