0

我有一个分为几类的柱形图。我想在每个条上放置误差线，但我不确定如何执行此操作（或在哪里查找）。到目前为止，这是我的代码：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>SIS</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <style type="text/css">
${demo.css}
        </style>
        <script type="text/javascript">
$(function () {
    $('#container').highcharts({
        title: {
            text: 'Search Inefficiency'
        },
        xAxis: {
            categories: ['Experiment 1', 'Experiment 2', 'Experiment 3', 'Experiment 4'],
        },

        yAxis: {
            reversedStacks: false,
            min: 0,
            title: {
                text: 'Search inefficiency',
                align: 'middle'
            },
            labels: {
                overflow: 'justify'
            }
        },

        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -40,
            y: 80,
            floating: false,
            borderWidth: 1,
            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
            shadow: true
        },

        series: [ {
            name: '0 degrees',
            type: 'column',
            data: [0.43,0.36,0.53,0.52]
        }, {
            name: '45 degrees',
            type: 'column',
            data: [0.94,1.00,1.22,0.87]
        }, {
            name: '90 degrees',
            type: 'column',
            data: [1.01,1.13,1.45,1.08]
        }, {
            name: '135 degrees',
            type: 'column',
            data: [0.78,0.95,1.36,1.00]
        },{
            name: '180 degrees',
            type: 'column',
            data: ["",0.48,0.83,0.62]
        }]

        // I want to retain the category clustering and give each column an error bar.  Not sure how to do it with the following error bar example:
        // series: [{
        //     name: 'Rainfall',
        //     color: '#4572A7',
        //     type: 'column',
        //     data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        // }, { 
        //     name: 'Rainfall error',
        //     type: 'errorbar',
        //     data: [[48, 51], [68, 73], [92, 110], [128, 136], [140, 150], [171, 179], [135, 143], [142, 149], [204, 220], [189, 199], [95, 110], [52, 56]]
        // }]

    });
});
        </script>
    </head>
    <body>
        <script src="../../js/highcharts.js"></script>
        <script src="../../js/modules/exporting.js"></script>

        <div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
    </body>
</html>
4

2 回答 2

0

问题1

您可以使用 plotLine 创建错误栏

plotLines: [{ 
            label: {
                text: 'Error Bar',
                x: 1.25
            },
            color: 'red',
            width: 2,
            value: 1,
            dashStyle: 'longdashdot'
        }]

请参阅此处更新的小提琴

对于下一个问题，要在 mousever 上获取图像， 请参阅此答案

于 2015-11-15T10:44:30.533 回答
0

首先：data: ["",0.48,0.83,0.62]- 你有字符串。如果您想有一个空点，请使用null，而不是""。

现在回答这个问题：只需将您的错误栏系列放在相应的列系列之后，例如：http: //jsfiddle.net/3ywmg1c7/

    series: [{
        name: '0 degrees',
        type: 'column',
        data: [0.43, 0.36, 0.53, 0.52]
    }, {
        type: 'errorbar',
        data: [
            [0.4, 0.5],
            [0.3, 0.4],
            [0.5, 0.6],
            [0.5, 0.6]
        ]
    }, {
        name: '45 degrees',
        type: 'column',
        data: [0.94, 1.00, 1.22, 0.87]
    }, {
        type: 'errorbar',
        data: [
            [0.9, 1],
            [0.9, 1.1],
            [1.2, 1.3],
            [0.8, 0.9]
        ]
    }]
于 2015-11-16T14:02:33.067 回答