Question

我有一个柱形图。单击其中一个垂直条时，所选条的颜色会发生变化。我想通过禁用图表上的“点击”事件检测来禁用此行为，以便当用户点击时没有任何反应。谁知道怎么做？

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'column',
        backgroundColor: 'transparent',
        container: {
            onclick : null
        }
    },
    colors: ['#27A1DE'],
    title: {
        text: null
    },
    credits : {
        enabled: false  
    },
    exporting : {
        enabled: false  
    },
    legend: {
        enabled: false  
    },
    xAxis: {
        title: {
            text: 'h',
            align: 'high',
            offset: -15
        },
        tickColor : 'transparent',
        labels: {
            style: {
            fontWeight:'bold'
        },
        y: 12,
        formatter: function() {
            var index = this.axis.categories.indexOf(this.value);
            var yValue = this.chart.series[0].yData[index];
            if (yValue === 0){
                return '<span>'+this.value+'</span>';
            } else {
                return '<span style="color:#009DE0;">'+this.value +'</span>';
            }
        }
        },
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: {
        min: 0,
        labels: {
            enabled: false  
        },
        gridLineWidth: 0,
        lineWidth: 1,
        title: {
            align: 'high',
            rotation: 0,
            text: 'kWh',
            offset: 0,
            y: -2
        }
    },
    plotOptions: {
        column: {
            pointPadding: 0.05,
            groupPadding: 0,
            dataLabels : {
                enabled: true,
                crop :false,
                overflow: 'none',
                rotation: 270,
                x:2,
                y:-14,
                style: {
                    color: '#009DE0',
                    fontSize: 'xx-small',
                },
                formatter: function() {
                    if (this.y != 0){
                        return '<span>'+this.y +'</span>';
                    } else {
                        return '<span style="display:none;">'+this.y +'</span>';
                    }
                }
            },
            borderWidth: 0,
            events: {
                click: function(e){
                //this.update({ color: '#27a1de' }, true, false);
                e.preventDefault();
                return false;
                }
            }
        },
        series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function() {
                    }
                }
            }
        }
    },

    series: [{
        name: '',
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
    }],
    tooltip: {
        enabled: false
    }
});

小提琴：here

由于

Answer 1

我理解你的问题的方式，你想要删除鼠标悬停时的样式更改（因为你的小提琴中的点击没有你所描述的颜色变化）。

http://jsfiddle.net/6pur4o1w/

states: { hover: 'none' }

系列中的

应该做你想做的事。

Highcharts禁用单击列

1 个答案: