Question

有谁会给Highcharts x轴的文字加点击事件？谢谢了

Answer 1

<script src="js/jquery-1.7.2.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<pre id="tsv" style="display:none">Browser Version Total Market Share
Microsoft Internet Explorer 8.0 26.61%
Microsoft Internet Explorer 9.0 16.96%
Chrome 18.0 8.01%
Chrome 19.0 7.73%
Firefox 12 6.72%
Microsoft Internet Explorer 6.0 6.40%
Firefox 11 4.72%
Microsoft Internet Explorer 7.0 3.55%
Safari 5.1 3.53%
Firefox 13 2.16%
Firefox 3.6 1.87%
Opera 11.x 1.30%
Chrome 17.0 1.13%
Firefox 10 0.90%
Safari 5.0 0.85%
Firefox 9.0 0.65%
Firefox 8.0 0.55%
Firefox 4.0 0.50%
Chrome 16.0 0.45%
Firefox 3.0 0.36%
Firefox 3.5 0.36%
Firefox 6.0 0.32%
Firefox 5.0 0.31%
Firefox 7.0 0.29%
Proprietary or Undetectable 0.29%
Chrome 18.0 - Maxthon Edition 0.26%
Chrome 14.0 0.25%
Chrome 20.0 0.24%
Chrome 15.0 0.18%
Chrome 12.0 0.16%
Opera 12.x 0.15%
Safari 4.0 0.14%
Chrome 13.0 0.13%
Safari 4.1 0.12%
Chrome 11.0 0.10%
Firefox 14 0.10%
Firefox 2.0 0.09%
Chrome 10.0 0.09%
Opera 10.x 0.09%
Microsoft Internet Explorer 8.0 - Tencent Traveler Edition 0.09%</pre>
<script type="text/javascript">
    $(function () {
        Highcharts.data({
            csv: document.getElementById('tsv').innerHTML,
            itemDelimiter: '\t',
            parsed: function (columns) {
                var brands = {},
                brandsData = [],
                versions = {},
                drilldownSeries = [];
                // Parse percentage strings
                columns[1] = $.map(columns[1], function (value) {
                    if (value.indexOf('%') === value.length - 1) {
                        value = parseFloat(value);
                    }
                    return value;
                });
                $.each(columns[0], function (i, name) {
                    var brand,
                    version;
                    if (i > 0) {
                        // Remove special edition notes
                        name = name.split(' -')[0];
                        // Split into brand and version
                        version = name.match(/([0-9]+[\.0-9x]*)/);
                        if (version) {
                            version = version[0];
                        }
                        brand = name.replace(version, ''拿竖);
                        // Create the main data
                        if (!brands[brand]) {
                            brands[brand] = columns[1][i];
                        } else {
                            brands[brand] += columns[1][i];
             链基           }
                        // Create the 消唤大version data
                        if (version !== null) {
                            if (!versions[brand]) {
                                versions[brand] = [];
                            }
                            versions[brand].push(['v' + version, columns[1][i]]);
                        }
                    }
                });
                $.each(brands, function (name, y) {
                    brandsData.push({
                        name: name,
                        y: y,
                        drilldown: versions[name] ? name : null
                    });
                });
                $.each(versions, function (key, value) {
                    drilldownSeries.push({
                        name: key,
                        id: key,
                        data: value
                    });
                });
                // Create the chart
                $('#container').highcharts({
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: 'Browser market shares. November, 2013'
                    },
                    subtitle: {
                        text: 'Click the columns to view versions. Source: netmarketshare.com.'
                    },
                    xAxis: {
                        type: 'category'
                    },
                    yAxis: {
                        title: {
                            text: 'Total percent market share'
                        }
                    },
                    legend: {
                        enabled: false
                    },
                    plotOptions: {
                        series: {
                            borderWidth: 0,
                            dataLabels: {
                                enabled: true,
                                format: '{point.y:.1f}%'
                            }
                        }
                    },
                    tooltip: {
                        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
                    },
                    series: [{
                        name: 'Brands',
                        colorByPoint: true,
                        data: brandsData
                    }],
                    drilldown: {
                        series: drilldownSeries
                    }
                })
            }
        });
    });
    
    </script>

追问

大神，先谢谢你写这么多。但是我没看懂在那加的事件！比如点击事件！麻烦 了

追答

<script src="js/jquery-1.7.2.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/3.0.2/highcharts.js" type="text/javascript"></script>
<div id="container" style="height: 400px; width: 500px">
</div>
<script type="text/javascript">
    $(function () {
        $('#container').highcharts({
            chart: {
        },

        xAxis: {
            categories: ['Foo', 'Bar', 'Foobar'],
            labels: {
                //useHTML: true,
                formatter: function () {
                    return '<a href="javascript:alert(\'hello\')">' +
                        this.value + '</a>';
                }
            }
        },

        series: [{
            data: [29.9, 71.5, 106.4]
        }]
    });
});
</script>

在labels的formatter属性里配置即可

Answer 2

chart: {
type: 'heatmap',
inverted: true,
backgroundColor: 'rgba(0,0,0,0)',
events: {
load: function() {
var xAxis = this.xAxis[0];
var chart = this
Highcharts.addEvent(xAxis.labelGroup.element, 'click', function(e) {
// 将原生事件添加上 chartX 和 chartY 值
e = chart.pointer.normalize(e);
e.stopPropagation();
var height = xAxis.height// xAxis
var len = xAxis.categories.length;
var offsetX = e.offsetX,offsetY = e.offsetY;
// 根据点击事件的位置计算出所在坐标轴的值
var index = Math.ceil(xAxis.toValue(e.chartX))+12*60*60*1000, // 下标
category = xAxis.categories[index]; // 分类
console.log(this,xAxis,e,Highcharts.dateFormat("%Y-%m-%d %H:%M:%S",index) ,category)
console.log("timemapx",timemapx)
max-index
var clientX = e.clientX,clientY = e.clientY;
infoObject.createNewInfoDiv(category,clientX,clientY)
});
Highcharts.addEvent(xAxis.labelGroup.element, 'mouseOut', function(e) {
// 将原生事件添加上 chartX 和 chartY 值
// e = chart.pointer.normalize(e);
e.stopPropagation();

// 根据点击事件销扮的位置计算出所在坐标轴的值
var index = Math.ceil(xAxis.toValue(e.chartX)), // 下标
category = xAxis.categories[index]; // 分类
console.log(this,xAxis,e,index,category)
showInfo && showInfo(id)
});
// chart.series[0].isDirty = true;
// chart.redraw();
// redrawEnabled = true;
// }
}
}
},
类似于这种，load，为在加首乎载完图片之后加载事件，click为亏芹灶点击