Highcharts折线图

Highcharts折线图

添加时间:2021-03-19 13:48:27
站长推荐丨赞助论坛,可获取海量资源终身免费下载权限奥!
举报 举报
收藏
预览
附件 附件
  • 模板类型模板类型:折线图
  • 模板颜色模板颜色:中级
  • 下载积分下载积分:28 米粒
  • 下载权限下载权限:

    赞助会员

今天介绍一款统计图插件:Highcharts。通过它生成一个一年四季平均降雨量折线图。Highcharts相关API,请点击highcharts选项配置文档说明
Highcharts折线图
分类:统计图 > 折线图 难易:中级

HTML

<div style="position: relative; overflow: hidden; width: 830px; height: 277px;" id="highcharts"></div>

引入jQuery库和highcharts相关组件

<script type="text/javascript" src="jquery.js"></script>  
<script src="highcharts/highcharts.js"></script>
<script src="highcharts/modules/exporting.js"></script>

highcharts生成折线图

$(function() {
    $('#highcharts').highcharts({
        chart: {
            type: 'line'
        },
        legend: { //图例 
            layout: 'horizontal',
            //图例显示的样式:水平(horizontal)/垂直(vertical) 
            align: 'center',
            //图例水平对齐方式 
            verticalAlign: 'top',
            //图例垂直对齐方式 
            x: 0,
            //相对X位移 
            y: 0,
            //相对Y位移 
        },
        title: { //标题
            text: ''
        },
        subtitle: { //副标题
            text: ''
        },
        xAxis: { //X轴选项
            categories: [ //设置X轴分类名称
            '春季', '夏季', '秋季', '冬季', ]
        },
        yAxis: { //Y轴选项
            min: 0,
            //Y轴最小值
            title: { //Y轴标题
                text: '降雨量 (mm)'
            }
        },
        tooltip: { //数据点提示框 当鼠标滑过某点时,以框的形式提示改点的数据,比如该点的值,数据单位等
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: { //数据点选项
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{ //数据列选项
            name: '江苏',
            //显示数据列的名称
            data: [49.9, 71.5, 106.4, 129.2] //数组或JSON,如:data:[0, 5, 3, 5],或data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}]
        },
        {
            name: '浙江',
            data: [83.6, 78.8, 98.5, 93.4]

        },
        {
            name: '山东',
            data: [48.9, 38.8, 39.3, 41.4]

        },
        {
            name: '广东',
            data: [42.4, 33.2, 34.5, 39.7]

        }],
        credits: {
            enabled: false //不显示highCharts版权信息
        },
        exporting: {
            enabled: false //用来设置是否显示‘打印’,'导出'等功能按钮,不设置时默认为显示
        },
    });
});
相关内容推荐
资源求助发帖
查看更多发帖

*

回帖描述:

*

链接类型:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
热点内容推荐
标题:Highcharts折线图

*

描述:
平均回复时间:3-10分钟
规则介绍:悬赏寻求论坛网友分享资源,站点对分享内容的准确性,合法性,版权等没有足够的监管能力。如果您发现资源不正确,无法使用,不符合法律法律等情况,您可以直接举报资源。站长将尽快核实您的举报,并根据情况,采取封号,退换米粒等处理。

*

回帖描述:

*

链接类型:

*

阅读权限:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
  • 背景波浪
  • 背景波浪
  • 波浪
  • 波浪
客服
在线咨询
周一 至 周日 9:00 ~ 22:00
QQ:1326974360
微信:juyoubuluo6688
客服热线
18205485173
工作日 9:00 ~ 18:00
微信扫码咨询
客户服务
欢迎咨询服务
咨询量较多时,请耐心等待
社群

关注公众号

获取更多资讯

扫码进群(QQ)

与更多大牛交流沟通

0.171692s