<!doctype html>
<html lang="en">
<head>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script>
<script>
highcharts三层钻取
</script>
</head>
<body> <div id="container" style="margin: 0 auto"></div>
<script>
$(function () { // Create the chart
$('#container').highcharts({
chart: {
type: 'column'
// type: 'line'
},
title: {
text: '当季新品总收入(元)-- 点击钻取'
},
xAxis: {
type: 'category'
}, legend: {
enabled: false
}, plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
}, xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}, series: [ {
name: '测试2',
type: 'line',
data: [
{y:3.9,drilldown: 'animals'},
{y:4.9,drilldown: 'animals'},],
drilldown: 'fruits'
}], /*
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}],
*/ drilldown: {
series: [{
id: 'animals',
data: [{
name: 'Animals2',
y: 5,
drilldown: 'cars'
}, {
name: 'Fruits2',
y: 2,
drilldown: 'cars'
}]
}, {
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
],
drilldown: 'cars'
}, {
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
});
}); </script> </body>
</html>

highcharts钻取例子的更多相关文章

  1. HighCharts -教程+例子

    Highchart简介:   Highcharts是一款免费开源的纯javascript编写的图表库,能够很简单便捷的在Web网站或Web应用中添加交互性的图表,  Highcharts目前支持直线图 ...

  2. android highcharts 柱状图例子

    android提供achartengine api 只能做简单的,如果是复杂的图表,个人的想法结合highcharts来完成:减小工作量,官方提供的例子也非常丰富. 通过android webview ...

  3. 一个Highcharts的例子

    关键字:Highcharts <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Typ ...

  4. 【HighCharts系列教程】一、认识Highcharts

    一.什么是HighCharts HighCharts是网页报表工具,开发语言是Javascript HighCharts是一个简单易用.美观.跨平台.跨浏览器的图表工具 HighCharts支持图表的 ...

  5. hightcharts 3d 堆积图下钻

    图片效果 ***************代码部分****************************************************** <!doctype html> ...

  6. Highcharts 向下钻取饼图

    Highcharts 向下钻取饼图 配置 drilldown 配置 drilldown 用于向下钻取数据,通过点击某项深入到其中的具体数据. drilldown: { series: drilldow ...

  7. 无聊写了一个最简单的MVC4+Highcharts连数据库例子

    乱搞了个数据库 后面发现没定INT类型 直接将ID当数据显示了 效果图: 前端 @{ Layout = null; } <!DOCTYPE html> <html> <h ...

  8. highcharts例子

    直接看代码 <script language="JavaScript"> $(document).ready(function() { $.ajax({ type:'p ...

  9. 解析大型.NET ERP系统 查找与钻取

    查找 Lookup 窗体是一个容器,也可以把TextBox,Button也看成是一个容器,可以往容器里面添加按钮. 参考下面的实现代码,给TextBox增加查找按钮. var btn = new Bu ...

随机推荐

  1. MVVM4

    原地址(内容更丰富):http://www.cnblogs.com/888h/category/269092.html MVVM架构的简单解析   图1 View.ViewModel.Model之间的 ...

  2. python3 on macos with vscode

    brew install python3 python3 -m pip install pylint python3 -m pip install autopep8 python3 -m pip in ...

  3. docker 私有registry 配置

    备注:此处使用linux镜像配置仓库 registry 启动步骤 https://hub.docker.com/_/registry/ docker login docker pull registr ...

  4. 条款3:尽可能的使用const

    const成员函数的一般好处有: 它使得class接口比较容易理解. 它使得操纵const对象成为可能. 使用的过程中应该在const与non const成员函数之间避免代码重复: class Tex ...

  5. 专业工具软件PCB板打印说明

    专业工具软件PCB板打印说明 请注意PCB板打印不要直接截图,如下方式是不正确的: 这样在打印为黑白图片时,元器件之间的连线无法看清. 应采用如下模式: ~End~

  6. 你真的对java static了解吗,代码优化可能更加简单

    static修饰的成员变量和成员方法独立于该类的任何对象.也就是说,它不依赖类特定的实例,被类的所有实例共享. 只要这个类被加载,Java虚拟机就能根据类名在运行时数据区的方法区内定找到他们.因此,s ...

  7. 大白话讲解如何给github上项目贡献代码

    本文献给对git很迷茫的新手,注意是新手,但至少会点基本操作,有点基本概念的新手,我不会从怎么用github和git是什么开始讲的.如果作为新手你看书又看不进去,原理又太复杂,又没有直接了当告诉我们怎 ...

  8. .net 系列化与反序列化(转载)

    .net序列化及反序列化 转载自:http://www.cnblogs.com/Tim_Liu/archive/2010/11/09/1872587.html 序列化是指一个对象的实例可以被保存,保存 ...

  9. [STM32]HardFault 定位办法

    网上关于HardFault的定位办法好多,试到了其中一种可行的 http://www.cnblogs.com/Ilmen/p/3356147.html 特此纪录.

  10. Android spannableStringBuilder用法整理

    Android spannableStringBuilder用法整理 分类: Android开发2013-11-29 10:58 5009人阅读 评论(0) 收藏 举报 Androidspannabl ...