Question

我想知道如何将工具提示值从一个值更改为另一个值。

主代码的以下片段显示了我的尝试，希望你能从中理解我想要的东西：

chart.tooltip[0].setPointFormat({
                pointFormat: '{point.x} m, {point.y} m'

任何帮助都会非常感激:) 这是主要代码：

function toggleContent(){
    document.getElementById("text").value=="Base unit" ? (document.getElementById("text").value="Base unit x1000"
): (document.getElementById("text").value="Base unit");

if(document.getElementById("text").value=="Base unit"){
    func2();}
else{
    func1();}
}


var divide=1;
function func1 () {
    var chart = $('#container').highcharts();
    var data = chart.series[0].data;
    if (data.length) {
        for(var i=0;i<data.length;i++)
        {
            var point = data[i];
            point.update([point.x/=1000,point.y/=1000]);
        }
        divide*=1000;
        chart.yAxis[0].setTitle({
            text: 'Surplus of Electrical Cable (km)'
        });
        chart.xAxis[0].setTitle({
            text: 'Electrical Cables (km)'
        });
        chart.tooltip[0].setPointFormat({          //This is the snippet line
            pointFormat: '{point.x} m, {point.y} m' 
        });

    }

};

var divide=1;
function func2() {
    var chart = $('#container').highcharts();
    var data = chart.series[0].data;
    if (data.length) {
        for(var i=0;i<data.length;i++)
        {
            var point = data[i];
            point.update([point.x*=1000,point.y*=1000]);
        }
        divide/=1000;
        chart.yAxis[0].setTitle({
            text: 'Surplus of Electrical Cable (m)'
        });
        chart.xAxis[0].setTitle({
            text: 'Electric Cables (m)'
        });
    }
};


$(function () {


    $('#container').highcharts({
        chart: {
            type: 'scatter',
            zoomType: 'xy'
        },
        title: {
            text: 'Height Versus Weight of 507 Individuals by Gender'
        },
        subtitle: {
            text: 'MainKey Quantities'
        },
        xAxis: {
            title: {
                enabled: true,
                text: 'Electric Cables (km)'
            },
            startOnTick: true,
            endOnTick: true,
            showLastLabel: true
        },
        yAxis: {
            title: {
                enabled: true,
                text: 'Surplus of Electric Cable (km)'
            },
            startOnTick: true,
            endOnTick: true,
            showLastLabel: true
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            verticalAlign: 'top',
            x: 100,
            y: 70,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
            borderWidth: 1
        },
        plotOptions: {
            scatter: {
                marker: {
                    radius: 5,
                    states: {
                        hover: {
                            enabled: true,
                            lineColor: 'rgb(100,100,100)'
                        }
                    }
                },
                states: {
                    hover: {
                        marker: {
                            enabled: false
                        }
                    }
                },
                tooltip: {
                    headerFormat: '<b>{series.name}</b><br>',
                    pointFormat: '{point.x} km, {point.y} km'
                }
            }
        },
        series: [{
            name: 'Actual Values',
            color: 'rgba(223, 83, 83, .5)',
            data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
                [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
                [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
                [147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
                [159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
                [174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
                [154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
                [162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
                [168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3]]

        }]
    });
});

JSfiddle：http://jsfiddle.net/mPY8z/2/ 附：基本上我希望工具提示的值以米（m）为单位，而目前它只显示为（km）

Answer 1

设置工具提示的格式化程序功能可实现此目的。

http://api.highcharts.com/highcharts#tooltip.formatter

演示：http://jsfiddle.net/robschmuecker/mPY8z/3/

function func2() {
    var chart = $('#container').highcharts();
    var data = chart.series[0].data;
    if (data.length) {
        for (var i = 0; i < data.length; i++) {
            var point = data[i];
            point.update([point.x *= 1000, point.y *= 1000]);
        }
        divide /= 1000;
        chart.yAxis[0].setTitle({
            text: 'Surplus of Electrical Cable (m)'
        });
        chart.xAxis[0].setTitle({
            text: 'Electric Cables (m)'
        });
    }
    chart.tooltip.options.formatter = function(){return this.point.x + ' m,' + this.point.y + ' m';};
};

更改图表工具提示

1 个答案: