Question

我正在尝试解决以下三个问题

Y轴上的小数位数（所有轴） - 应为常数5
工具提示上的小数位数 - 应该是常数5
为工具提示中的所有点添加后缀

我需要将Y轴上显示的值固定为从数据源接收的5位小数（例如0.96724或1.55400）。

我已经分叉并创建了一个新的jsfiddle以突出显示该问题。这仅显示最多两位数。从各种例子中，我试图创建一个工具提示，但它没有用。

任何帮助或指示都将受到高度赞赏。在下面创建了一个jsfiddle

此致阿米特

http://jsfiddle.net/amonga141/tgz469a5/2/

// Some styling options for yAxis
Highcharts.theme = {
    yAxis: {
        gridLineWidth: 1,
        gridLineColor: "rgb(240, 240, 240)",
        minorGridLineColor: 'rgba(255, 255, 255, 0.07)',
        lineColor: "rgb(241, 141, 5)",
        lineWidth: 1,
        tickColor: "rgb(241, 141, 5)",
        tickWidth: 1,
        showEmpty: false,
        labels: {
            style: {
                color: 'rgb(102, 102, 102)',
                fontWeight: 'bold'
            }
        },
        title: {
            style: {
                color: 'rgb(229, 64, 40)',
                font: "bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif"
            }
        }
    }
};

// Apply the styling options
Highcharts.setOptions(Highcharts.theme);

Highcharts.setOptions({
    global: {
        useUTC: false
    }
});

// Data generator helper
function data(start, end, samples, min, max) {
    var temp = [];
    var range = ~~ ((end - start) / samples);
    for (var i = 1; i < samples; i++) {
        temp.push([start.getTime() + range * i, min + Math.random() * (max - min)]);
    }
    return temp;
}

// 
var tooltipSuffix ='<br> TTIP Sufix:Suffix';
// Create a timer
var now = new Date();
var start = new Date(now - 60000);

var example_data = [{
    name: 'Signal 1',
    data: data(start, now, 20, 1.55478, 1.55481),
    yAxis: 0
}, {
    name: "Signal 2",
    data: data(start, now, 20, 1.32419,  1.13253),
    yAxis: 1
}, {
    name: "Signal 3",
    data: data(start, now, 20, 0.97456, 0.97545),
    yAxis: 2
}];

//////////////////////
// Chart definition //
//////////////////////
var chart = $("#chart").highcharts({
    legend: {
        enabled: true
    },
    chart: {
        animation: Highcharts.svg,
        events: {
            load: function () {
                // set up the updating of the chart each second
                var chart = this,
                    series = chart.series;

                setInterval(function () {
                    var x = new Date(); // current time

                    series[0].addPoint(data(x, x, 2, 1.55678, 1.59133)[0], false, true);
                    series[1].addPoint(data(x, x, 2, 1.33456, 1.39921)[0], false, true);
                    series[2].addPoint(data(x, x, 2, 0.95989, 0.99092)[0], false, true);

                    chart.redraw();
                }, 2000);
            }
        }
    },
   yAxis: [{
        opposite: false,
        showRects: true,
        offset: 40,
        title: {
            text: 'Scale 1'
        }
    }, {
        opposite: true,
        showRects: true,
        offset: 90,
        title: {
            text: 'Scale 2'
        }
    }, {
        opposite: false,
        showRects: true,
        offset: 140,
        title: {
            text: 'Scale 3'
        }
    }],
    xAxis: {
        type: 'datetime'
    },
//    tooltip: {
//                  xDateFormat: '%A, %b %e, %H:%M:%S', // Shows only [Day, Mon dd, hh:mi:ss]
//                  shared: true,
//                    pointFormat: ' <span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> <br/>'+tooltipSuffix,
//                    valueDecimals: 5,
//                    crosshairs: true
//    } ,
    series: example_data
});

<div id="chart"></div>

Answer 1

请参阅Working fiddle with your code here

对于标签，请在yAxis选项中使用以下内容。

 labels: {
        format: '{value:.5f}',
  }

for tooltip请参阅下面的格式化程序功能

 tooltip: {     
                shared: true,
                pointFormat: ' <span style="color:{series.color}">{series.name}</span>: <b>{point.y:.5f}</b>'+tooltipSuffix+' <br/>',

   }

将y轴上的小数固定为5个位置

1 个答案: