Highcharts问题

Question

你可以帮我使用highcharts api这个客户想看的图像：

以下是我的示例代码：

@RequestMapping("/picture/{id}")
@ResponseBody
public HttpEntity<byte[]> getArticleImage(@PathVariable String id) {

    logger.info("Requested picture >> " + id + " <<");

    // 1. download img from http://internal-picture-db/id.jpg ... 
    byte[] image = ...

    HttpHeaders headers = new HttpHeaders();
    headers.setContentType(MediaType.IMAGE_JPEG);
    headers.setContentLength(image.length);

    return new HttpEntity<byte[]>(image, headers);
}

我的脑子正在滚动编码对高级图表的评论。提前谢谢！

Answer 1

你需要为你设置很多选项，模型：https://jsfiddle.net/ptysyo4p/13/

长话短说：

• 使用多个x轴在图表的顶部/中间/底部显示类别，使用linkedTo选项连接它们
• 使用两个y轴，显示图表的两个独立部分。按top和height管理这些职位。第二个轴与第一个轴相关联，但是相反 - 仍然可以像我期望的那样显示正值。
• 第一点很难，我建议在那里呈现transparent列，以便在悬停该标签时显示标签和工具提示

代码：

$('#container').highcharts({
    chart: {
        type: 'column'
    },
    legend: {
        enabled: false
    },
    tooltip: {
        shared: true  
    },
    xAxis: [{
        id: "mainAxis",
        top: '52%',
        lineWidth: 0,
        opposite: true,
        categories: ["Age", "18-24", "25-34", "45-54"],
        offset: 0,
        labels: {
            y: -1   
        }
    }, {
        linkedTo: 0,
        showEmpty: true,
        offset: 0,
        lineWidth: 0,
        categories: ["46%", "30%", "30%", "30%"],
        opposite: true
    }, {
        linkedTo: 0,
        showEmpty: true,
        offset: 0,
        lineWidth: 0,
        categories: ["54%", "45%", "15%", "30%"],
        opposite: false
    }],
    yAxis: [{
        height: '45%',
        offset: 0,
        title: {
            text: ""
        },
        labels: {
            enabled: false
        },
        endOnTick: true
    }, {
        top: '55%',
        height: '45%',
        reversed: true,
        linkedTo: 0,
        offset: 0,
        title: {
            text: ""
        },
        labels: {
            enabled: false
        },
        endOnTick: true
    }],

    series: [{
        borderWidth: 0,
        name: "Women",
        data: [{
            y: 46,
            color: "transparent",
            dataLabels: {
                enabled: true,
                inside: true,
                verticalAlign: "bottom",
                format: "Women"
            }
        },
        30, 30, 30],
        yAxis: 0
    }, {
        borderWidth: 0,
        name: "Men",
        data: [{
            y: 54,
            color: "transparent",
            dataLabels: {
                enabled: true,
                inside: true,
                verticalAlign: "top",
                format: "Men"
            }
        }, 45, 15, 30],
        yAxis: 1
    }]
});

当然，您需要处理颜色，背景等。请注意，某些选项设置为适合图表的特定高度，例如xAxis[0].labels.y。