如何将图表直接放在图例上方? (highcharts)

时间:2017-05-30 13:18:54

标签: javascript highcharts

这是我迄今取得的成就

http://jsfiddle.net/9r6Lr5gr/3/

static class RoutedCommands
{
    public static RoutedUICommand NewMap = new RoutedUICommand(
        "New Map",
        "NewMap",
        typeof(RoutedCommands),
        new InputGestureCollection()
        {
            new KeyGesture(Key.M, ModifierKeys.Control | ModifierKeys.Shift),
            new KeyGesture(Key.A, ModifierKeys.Control | ModifierKeys.Shift)
        }
        );
}

我想将条形图直接放在图例上方。此外,是否可能在条形图之前的小水平线。感谢。

1 个答案:

答案 0 :(得分:0)

通过代码中的评论

Fiddle Demo

Highcharts.chart('container', {
    chart: {
        type: 'bar',
        marginBottom: -180, //make charts display at bottom
        events: {
            load: function () {
                // Draw the horizontal line
                var ren = this.renderer,
                    colors = Highcharts.getOptions().colors,
                    line = ['M', 550, 0, 'L', 0, 0, 'L', 0, 0, 'M', 0, 0, 'L', 5, 0];

                ren.path(line)
                    .attr({
                        'stroke-width': 2,
                        stroke: colors[1]
                    })
                    .translate(10, 335)
                    .add();

            }
        }

    },
    title: {
        text: ''
    },
    exporting: {
            enabled: false
    },
    credits: {
            enabled: false
    },
    tooltip: {
            enabled: false
    },
    xAxis: {
            lineWidth: 0,
        title: {
                text: ''
        },
        labels: {
                enabled: false
        }
    },
    yAxis: {
            gridLineWidth: 0,
        title: {
                text: ''
        },
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: 'gray'
            },
            formatter: function(){
                    return 'Total: ' + this.total;
            }
        },
        labels: {
                enabled: false
        }
    },
    legend: {
        reversed: true,
        align: 'left'
    },
    plotOptions: {
        series: {
            stacking: 'normal',
            pointWidth: 30,
            dataLabels: {
                enabled: true,
                color: 'white',
                style: {
                        fontWeight: 'none',
                        fontSize: 15
                }
            }
        }
    },
    series: [{
        name: 'Outstanding (due > 7 days)',
        data: [41]
    }, {
        name: 'Outstanding (due < 7 days)',
        data: [32]
    }, {
        name: 'Overdue',
        data: [15]
    }]
});