文档章节

Highcharts 集成饼图+柱形图+折线图的结构配置

孟飞阳
 孟飞阳
发布于 2017/08/21 12:51
字数 191
阅读 48
收藏 0

HTML代码

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

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

js代码

Highcharts.chart('container', {
    title: {
        text: 'Combination chart'
    },
    xAxis: {
        categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
    },
    labels: {
        items: [{
            html: 'Total fruit consumption',
            style: {
                left: '50px',
                top: '18px',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
            }
        }]
    },
    series: [{
        type: 'column',
        name: 'Jane',
        data: [3, 2, 1, 3, 4]
    }, {
        type: 'column',
        name: 'John',
        data: [2, 3, 5, 7, 6]
    }, {
        type: 'column',
        name: 'Joe',
        data: [4, 3, 3, 9, 0]
    }, {
        type: 'spline',
        name: 'Average',
        data: [3, 2.67, 3, 6.33, 3.33],
        marker: {
            lineWidth: 2,
            lineColor: Highcharts.getOptions().colors[3],
            fillColor: 'white'
        }
    }, {
        type: 'pie',
        name: 'Total consumption',
        data: [{
            name: 'Jane',
            y: 13,
            color: Highcharts.getOptions().colors[0] // Jane's color
        }, {
            name: 'John',
            y: 23,
            color: Highcharts.getOptions().colors[1] // John's color
        }, {
            name: 'Joe',
            y: 19,
            color: Highcharts.getOptions().colors[2] // Joe's color
        }],
        center: [100, 80],
        size: 100,
        showInLegend: false,
        dataLabels: {
            enabled: false
        }
    }]
});

效果

在线调试

http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/combo/

© 著作权归作者所有

孟飞阳
粉丝 212
博文 1011
码字总数 552670
作品 5
朝阳
个人站长
私信 提问
网页图表Highcharts实践教程之认识Highcharts

网页图表Highcharts实践教程之认识Highcharts 第1章 认识Highcharts Highcharts是国际知名的一款图表插件。它完全使用Javascript编写实现。其结构清晰,使用简单。开发人员可以很轻松地构建出...

大学霸
2015/05/27
0
0
Echarts二次封装--折线图,柱型图和饼图整合为一个

普通项目中常用的可视化图表,可能也就折线图,柱型图和饼图,如果每次都需要重新配置一遍图表参数,也会很心累,以下是我将三表合一的开发实践。 完成需求 折线图,柱型图和饼图三图合一; ...

Rico_wang
2017/12/12
0
0
基于HTML5的图表组件--ichartjs

ichartjs 是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。 ichartjs致力于为WEB应用提供简单、直观、可交互的体验级图表组件。是WEB图表展示方面的解决...

ichartjs
2012/07/11
9.7K
4
数据分析基础—6.1 数据展现

数据展现是数据分析师用最简单的、易于理解的形式,把数据分析的结果呈现给决策者,帮助决策者理解数据所反映的规律和特性。它也被称为数据可视化。 数据展现的常用形式有简单文本、表格、图...

小明学数据
2018/08/11
0
0
可视化图表初阶

简述 数据可视化-通过图表形式展现数据,帮助用户快速、准确理解信息。准确、快速是可视化的关键,好的可视化会“讲故事”,能向我们揭示数据背后的规律。对于可视化,有一个常见误区:分析师...

月下柳人松
2017/06/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

全面剖析 Knative Eventing 0.6 版本新特性

前言 Knative Eventing 0.6 版本已经于5月15号正式发布。相比于0.5版本,此次发布包含了一些重要特性及更新。针对这些新特性以及更新,我们如何快速、精准的定位主要技术点。本篇文章针对这些...

阿里云官方博客
4分钟前
0
0
在闲鱼,我们如何用Dart做高效后端开发?

背景 像阿里其他技术团队以及业界的做法一样,闲鱼的大多数后端应用都是全部使用java来实现的。java易用、丰富的库、结构容易设计的特性决定了它是进行业务开发的最好语言之一。后端应用中数...

阿里云云栖社区
6分钟前
3
1
初学Docker容器网络不得不看的学习笔记

【技术沙龙002期】数据中台:宜信敏捷数据中台建设实践|宜信技术沙龙 将于5月23日晚8点线上直播,点击报名 一、关于Docker Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0...

宜信技术学院
8分钟前
2
0
Django框架配置

今天我们学习Django框架配置,首先先来看一下如何在Django中创建APP! 1.Django中创建APP 首先我们打开PyCharm,找到之前你创建的Django项目,我的项目是First_Project: (1)先选中你要运行...

彩色泡泡糖
10分钟前
0
0
git代码迁移

一、从阿里云code迁移到gitLab 1、在gitLab上新建一个项目Bicon,添加私钥 2、从原地址克隆一份裸版本库 git clone --bare git://xxxx_Bicon.git 这里的地址是阿里云code的地址 3、以镜像推送...

星爵22
11分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部