Question

我的char的情况是，当前刻度标记根据我的“tickposition”参数定位，它们显示我想要的但问题是例如'50'上的刻度标记应该在中间图表低于50％的泡沫。所以我的图表偏离中心。

我不确定我使用的图表类型是否正确或如何解决此问题。我是Highcharts的超级新人。

这就是我所拥有的：

$(function () {
$('#container').highcharts({
    xAxis: {
       tickPositions: [250, 500, 750, 1000],
        min: 0,
        max: 900,
        labels: {
            formatter: function() {
                return this.value / 10;
            }
        },
    },
    yAxis: {
        min: 0,
        allowDecimals: false,
        floor : 0,
        ceiling: 200,
        lineWidth: 0,
        minorGridLineWidth: 0,
        lineColor: 'transparent',
        minorTickLength: 0,
        tickLength: 0,
        gridLineColor: 'transparent',
         labels: {
            enabled: false
        },
        title: {
            text: null
        }
    },
    chart: {
        events: {
            redraw: function () {
                var chart = this,
                    point = chart.series[1].points[0];
                if(chart.customLabel) {
                    chart.customLabel.attr({
                        x: point.plotX + chart.plotLeft - 25,
                        y: point.plotY + chart.plotTop - 65,
                        anchorX: point.plotX + chart.plotLeft, 
                        anchorY: point.plotY + chart.plotTop
                    });
                }
            }
        }
    },
    legend: {
        enabled: false
    },
    series: [{
        type: 'areaspline',
        marker: {
            enabled: false
        },
       data: [
            [0, 1],
            [210, 1],
            [225, 2],
            [372,108],
            [378,112],
            [387, 118],
            [396, 122],
            [403, 125],
            [433, 130],             
            [450, 129],
            [460, 126],
            [472, 122],
            [479, 118],
            [486, 114],
            [495,108],
            [502,102],
            [504,100],
            [510, 94],
            [514, 89],
            [518, 85],
            [522, 81],
            [526, 76],
            [529, 72],
            [534, 67],
            [541, 59],
            [548, 51],
            [556, 43],
            [566, 34],             
            [583, 22],
            [593, 17],
            [612, 9],
            [621, 6],
            [626, 5],
            [635, 3],
            [642, 2],
            [651, 1],
            [870, 1],
            [1000, 1]              
        ],
        zoneAxis: 'x',
        zones: [{
            value: 430,
            color: '#18d1ba'
        }, {
            color: '#74e3d6'
        }]
    }, {
        type: 'scatter',
        data: [
            [430, 130]
        ],
        marker: {
            radius: 8,
            symbol: 'circle',
            fillColor: '#fff',
            lineColor: '#09f',
            lineWidth: 3
        }
    }]
}, function (chart) { // on complete
    var point = chart.series[1].points[0];
    chart.customLabel = chart.renderer.label('50%', point.plotX + chart.plotLeft - 25, point.plotY + chart.plotTop - 65, 'callout', point.plotX + chart.plotLeft, point.plotY + chart.plotTop)
        .css({
        color: '#09f',
        fontSize: '18px'
    })
        .attr({
        'stroke-width': 3,
        stroke: '#09f',
        fill: '#fff',
        padding: 8,
        r: 5,
        zIndex: 6
    })
        .add();
});

}）;

这是所需图表的图片，请注意“x”位置或刻度线的位置。 http://claudiawong.ca/test/example.png

有没有人碰巧给我一个如何改变的例子，理想情况下，一个jsfiddle形式的例子会非常有帮助。

感谢!!!!

Answer 1

扩展我的评论：

1）你知道，在你的例子中，50％是430.你可以从中确定25％，75％和100％是什么。

2）您可以将这些百分比的值设置为tickPositions数组。

3）您需要将值映射到要在标签中显示的％

一个非常快速和肮脏的例子：

var x100 = 860;
var x75  = (x100 * .75);
var x50  = (x100 * .5 );
var x25  = (x100 * .25);

var vals = {};
vals[x100] = '100';
vals[x75 ] = '75';
vals[x50 ] = '50';
vals[x25 ] = '25';

然后，您可以在标签格式化程序中使用此对象来显示正确的值。

实施例：http://jsfiddle.net/hu1t8159/18/

如何在areapline highchart上调整tickposition或'x'轴

1 个答案: