用hightcharts绘制boxplot 出错

sky_m 发布于 2017/09/01 20:26
阅读 31
收藏 0

代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="do/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="do/highcharts.js"></script>
<!-- <script type="text/javascript" src="JS/highcharts-more.js"></script> -->
<script type="text/javascript" src="JS/exporting.js"></script>
<!-- <script type="text/javascript" src="JS/data.js"></script> -->
<title>Ibox</title>
<script>
$(function () {
    $('#container').highcharts({

        chart: {
            type: 'boxplot'
        },

        title: {
            text: 'Highcharts box plot styling'
        },

        legend: {
            enabled: true
        },

        xAxis: {
            categories: ['1', '2'],
            title: {
                text: 'Experiment No.'
            }
        },

        yAxis: [{
            title: {
                text: 'Observations'
            }},
            {
            title: {
                text: 'Observations2'
            }}]
        ,

        plotOptions: {
            boxplot: {
                fillColor: '#F0F0E0',
                lineWidth: 2,
                medianColor: '#0C5DA5',
                medianWidth: 3,
                stemColor: '#A63400',
                stemDashStyle: 'dot',
                stemWidth: 1,
                whiskerColor: '#3D9200',
                whiskerLength: '20%',
                whiskerWidth: 3
            }
        },

        series: [{
            name: 'Observations',
            data: [
                [10, 20, 30, 40,50,60],
                [1, 2, 3, 4, 5,8]
            ]
        },
                {
            name: 'Observations2',
            data: [
                [360, 801, 848, 895,678,563],
                [733, 853, 939, 980, 1080,777]
            ]
        }]
    });
});
</script>
</head>
<body>
<div id="container" style="height: 400px; margin: auto; min-width: 310px; max-width: 600px">
<h1>hello</h1></div>
</body>
</html>

如果将data 改成

  series: [{
            name: 'Observations',
            data: [
                [10, 20, 30, 40,50],
                [1, 2, 3, 4, 5]

            ]
        },
                {
            name: 'Observations2',
            data: [
                [360, 801, 848, 895,678],
                [733, 853, 939, 980, 1080]

            ]
        }]

结果比较正常,为什么,是只能输入5个数字吗???求助

加载中
0
sky_m
sky_m

解决问题了,data中的5个数字分别代表 min q1 middle q3 

0
简数科技
简数科技

非常不错

Highcharts可以直接在线编辑源码,马上生成图表

这个平台上回答Highcharts问题较少,建议直接在Highcharts中文官网论坛上提问哦

1、Highcharts 中文官网:https://www.hcharts.cn/

2、Highcharts 中文学习教程:https://www.hcharts.cn/docs

3、Highcharts 中文论坛:https://bbs.hcharts.cn/forum.php

返回顶部
顶部