具有两个x轴的Highcharts,第二个轴应该以y轴的平均值绘制

时间:2013-02-11 05:21:50

标签: highcharts

我想绘制两个x轴,第二个轴绘制为y值的平均值。

我尝试使用offset属性,但它以像素为单位。我认为可以通过格式化程序完成。但不知道该怎么做。

$(function () {
var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line',
                zoomType: 'x',
        },
        tooltip: {
            enabled: true,

        },
        title: {
            text: 'Prediction of Surface Sites'
        },


        xAxis:[ {
            categories: ["S","A","E","D","V","L","K","E","Y","D","R","R","R","R","M","E","A","L","L","L","S","L","Y","Y","P","N","D","R","K","L","L","D","Y","K","E","W","S","P","P","R","V","Q","V","E","C","P","K","A","P","V","E","W","N","N","P","P","S","E","K","G","L","I","V","G","H","F","S","G","I","K","Y","K","G","E","K","A","Q","A","S","E","V","D","V","N","K","M","C","C","W","V","S","K","F","K","D","A","M","R","R","Y","Q","G","I","Q","T","C","K","I","P","G","K","V","L","S","D","L","D","A","K","I","K","A","Y","N","L","T","V","E","G","V","E","G","F","V","R","Y","S","R","V","T","K","Q","H","V","A","A","F","L","K","E","L","R","H","S","K","Q","Y","E","N","V","N","L","I","H","Y","I","L","T","D","K","R","V","D","I","Q","H","L","E","K","D","L","V","K","D","F","K","A","L","V","E","S","A","H","R","M","R","Q","G","H","M","I","N","V","K","Y","I","L","Y","Q","L","L","K","K","H","G","H","G","P","D","G","P","D","I","L","T","V","K","T","G","S","K","G","V","L","Y","D","D","S","F","R","K","I","Y","T","D","L","G","W","K","F",],
            minRange:5,
        }, {
            lineWidth:1,
            offset:-80,
            title:{
                text:'Mean Axis'
            }}],
        yAxis: {
            title: {
                text: 'Surface Sites'
            },

        },

        plotOptions: {
            line: {
                dataLabels: {
                    enabled: false
                },
                enableMouseTracking: true
            },
            series:{
                marker: {
                    enabled:true,
                    radius:2,

                }
            },


        },
        series: [{
            name: 'HPLC',
            data: [15.1,15.6,4.3,19.2,20.5,16.5,18.7,12.9,20.8,34.2,32.7,20.7,30.4,22.5,9.1,-4.3,-17.7,-15.4,-20.4,-30.1,-34.1,-22.8,-6.6,12.6,10.3,25.2,17.9,10.6,18.5,9.6,5.3,8.9,-6.8,8.9,20.2,12.3,18.4,9,7.2,13.5,14.8,14.1,14.1,15.6,21.4,17.5,17.5,17.5,6.1,11,12.3,12.3,12.3,22.5,22.5,38.2,36.9,20.7,10.6,4.8,4,-1.7,-16.6,-15.8,-0.9,-0.9,8.5,0.9,4.5,19.4,20.7,20.7,30.8,31.1,35.1,35.9,38,26.5,30.8,25,26,29.6,18.9,12.5,17.6,-2.4,-2.4,-2.9,-2.9,-7.9,-3.6,5,17.1,16.6,14.3,12.8,20.1,20.4,16.1,6,16.2,17.2,14.4,22,8,4.4,18.1,17.8,8.9,-1.7,-0.9,17.1,5.8,10.1,6.5,15.9,17.1,16.3,8.4,15.7,12.7,1.4,0.9,5.2,7.3,10.9,9.1,9.9,24.8,10.4,10.4,6.8,-0.8,9.4,5.8,-3.6,10.8,20.2,22,26,15.8,13.7,19.5,5.1,-9.8,-10.1,-4.4,-9.9,-7.8,-7.8,7.9,22.8,23.1,13.4,30.4,33.2,27.4,27.9,13,-1,3,-6.7,-21.7,-27.2,-29,-9.8,3.9,6,4.2,22.2,23.4,24.2,16.3,1.4,5,14.4,14.4,13.2,3.5,7.1,26.3,9.3,9.3,1.4,1.4,1.4,3.5,0,11.3,7.7,9.8,14.8,22.7,20.9,20.1,20.1,13.8,1.6,12.8,4.9,4.6,-3,-13.1,-18.1,-12,-13,-18.5,-33.4,-25.8,-12.1,-0.8,6.8,2.9,17.8,29.1,33.4,33.4,33.4,37.7,27.6,12.7,15.8,2.1,2.1,5.2,0.9,15.4,30.3,30.8,30.8,15.9,8.8,13.1,16.6,17.4,2.5,10.4,25.3,19.2,7.3,2.5,6,6,7.5,-8.2,5.5,-1.8,-1.8,-9.7,-9.7,]
        }]
    });
});

});         

任何建议......

jsfiddle link

1 个答案:

答案 0 :(得分:0)

您可以改用plotLines。在plotLines中,您要设置应显示的值,请参阅: