今天看啥 热点：
Echarts使用心得总结（二）
前一段时间一直都挺忙的，各种事，也没来得及每周的总结，趁着晚上的一点时间把项目中用的Echart中常用的各种图表给抽象总结了一下，趁着周末跟大家分享一下。之前写过一篇相关的文章，当时主要是讲了如何引入、使用Echart，最新的Echart版本已经发布，之前讲的很多文件都可以删除了，下边会一一给大家细讲。
为了更好的讲解如何使用这个图形渲染插件，我会通过创建一个解决方案的形式一点点给大家讲解清楚。
1.& EChart最新的文档目录。
首先创建一个解决方案，目录如下：
之前的一篇文章中讲到如果要使用Echarts还要下载相关的ZRender的渲染包，最新的版本已经将这些合并在一起了，只需要引用图中红框标注的echarts文件夹下的文件即可。各文件的作用如下：
l& Echarts-map.js :主要用来渲染跟地图相关
l& Echarts.js :基本的常规图形相关
l& Esl.js :图像引擎
Statics文件夹下的ECharts.js文件，为我自己抽象总结出来的用于Echarts的配置文件加载、数据处理、初始化各种图像类型的配置、图像渲染的一些方法。
2.& 抽象之后的Echarts。
根据Echarts官网的讲解，我把Echarts的使用归结为一下的几个步骤，同时这些步骤相应的实现对应到Statics文件夹下的Echarts.js，该文件的主要代码目录如下：
Var ECharts={
ChartConfig:function(container,option){ …..},//加载Echarts配置文件
ChartDataFormate:{….},//数据格式化
ChartOptionTemplates:{….},//初始化常用的图表类型
Charts:{ RenderChart:function(option){….},//渲染图表
RenderMap:function(option){…}//渲染地图
2.1 Echarts配置文件的引入
在开始使用时，首先需要引入Echarts 的配置文件，也就是要加载基本的图像类型，我们可以在每一个页面都引入，但是这样抽象化程度不高，重复使用率也不高，只需要有一个配置项在每次引用的时候加载一下即可，对应到具体的代码实现，如下：
ChartConfig: function (container, option) { //container:为页面要渲染图表的容器，option为已经初始化好的图表类型的option配置
var chart_path = &/Statics/echarts/echarts&; //配置图表请求路径
var map_path = &/Statics/echarts/echarts-map&;//配置地图的请求路径
require.config({//引入常用的图表类型的配置
echarts: chart_path,
'echarts/chart/bar': chart_path,
'echarts/chart/pie': chart_path,
'echarts/chart/line': chart_path,
'echarts/chart/k': chart_path,
'echarts/chart/scatter': chart_path,
'echarts/chart/radar': chart_path,
'echarts/chart/chord': chart_path,
'echarts/chart/force': chart_path,
'echarts/chart/map': map_path
this.option = { chart: {}, option: option, container: container };
return this.
2.2 数据格式化
为了能够更好的展现各种的数据，在进行图表的option配置之前，需要先对从后台请求过来的数据进行格式化。后台返回的数据必须是json格式的数据，且数据类型只能为以下两种类型:
& & & &Result1=[{name:XXX,value:XXX},{name:XXX,value:XXX}….]
&&&&&& Result2=[{name:XXX,group:XXX,value:XXX},{name:XXX,group:XXX,value:XXX]
具体的代码实现如下：
ChartDataFormate: {
FormateNOGroupData: function (data) {//data的格式如上的Result1，这种格式的数据，多用于饼图、单一的柱形图的数据源
var categories = [];
var datas = [];
for (var i = 0; i & data. i++) {
categories.push(data[i].name || &&);
datas.push({ name: data[i].name, value: data[i].value || 0 });
return { category: categories, data: datas };
FormateGroupData: function (data, type, is_stack) {//data的格式如上的Result2，type为要渲染的图表类型：可以为line，bar，is_stack表示为是否是堆积图，这种格式的数据多用于展示多条折线图、分组的柱图
var chart_type = 'line';
chart_type = type || 'line';
var xAxis = [];
var group = [];
var series = [];
for (var i = 0; i & data. i++) {
for (var j = 0; j & xAxis.length && xAxis[j] != data[i]. j++);
if (j == xAxis.length)
xAxis.push(data[i].name);
for (var k = 0; k & group.length && group[k] != data[i]. k++);
if (k == group.length)
group.push(data[i].group);
for (var i = 0; i & group. i++) {
var temp = [];
for (var j = 0; j & data. j++) {
if (group[i] == data[j].group) {
if (type == &map&)
temp.push({ name: data[j].name, value: data[i].value });
temp.push(data[j].value);
switch (type) {
case 'bar':
var series_temp = { name: group[i], data: temp, type: chart_type };
if (is_stack)
series_temp = $.extend({}, { stack: 'stack' }, series_temp);
case 'map':
var series_temp = {
name: group[i], type: chart_type, mapType: 'china', selectedMode: 'single',
itemStyle: {
normal: { label: { show: true} },
emphasis: { label: { show: true} }
data: temp
case 'line':
var series_temp = { name: group[i], data: temp, type: chart_type };
if (is_stack)
series_temp = $.extend({}, { stack: 'stack' }, series_temp);
var series_temp = { name: group[i], data: temp, type: chart_type };
series.push(series_temp);
return { category: group, xAxis: xAxis, series: series };
2.3 各种图表类型的配置初始化
在通过2.2步骤将从后台获得的数据进行初始化之后，我们就可以进行图表的option的配置了，在这里我主要对常用的饼图、柱图（单一、分组、堆积柱图）、折线图（分组、堆积折线图）、柱图+折线（增幅）图、中国地图等图进行了配置项的初始化。具体实现如下：
ChartOptionTemplates: {
CommonOption: {//通用的图表基本配置
tooltip: {
trigger: 'axis'//tooltip触发方式:axis以X轴线触发,item以每一个数据项触发
toolbox: {
show: true, //是否显示工具栏
feature: {
mark: true,
dataView: { readOnly: false }, //数据预览
restore: true, //复原
saveAsImage: true //是否保存图片
CommonLineOption: {//通用的折线图表的基本配置
tooltip: {
trigger: 'axis'
toolbox: {
show: true,
feature: {
dataView: { readOnly: false }, //数据预览
restore: true, //复原
saveAsImage: true, //是否保存图片
magicType: ['line', 'bar']//支持柱形图和折线图的切换
Pie: function (data, name) {//data:数据格式：{name：xxx,value:xxx}...
var pie_datas = ECharts.ChartDataFormate.FormateNOGroupData(data);
var option = {
tooltip: {
trigger: 'item',
formatter: '{b} : {c} ({d}/%)',
show: true
orient: 'vertical',
x: 'left',
data: pie_datas.category
name: name || &&,
type: 'pie',
radius: '65%',
center: ['50%', '50%'],
data: pie_datas.data
return $.extend({}, monOption, option);
Lines: function (data, name, is_stack) { //data:数据格式：{name：xxx,group:xxx,value:xxx}...
var stackline_datas = ECharts.ChartDataFormate.FormateGroupData(data, 'line', is_stack);
var option = {
data: stackline_datas.category
type: 'category', //X轴均为category，Y轴均为value
data: stackline_datas.xAxis,
boundaryGap: false//数值轴两端的空白策略
name: name || '',
type: 'value',
splitArea: { show: true }
series: stackline_datas.series
return $.extend({}, monLineOption, option);
Bars: function (data, name, is_stack) {//data:数据格式：{name：xxx,group:xxx,value:xxx}...
var bars_dates = ECharts.ChartDataFormate.FormateGroupData(data, 'bar', is_stack);
var option = {
legend: bars_dates.category,
type: 'category',
data: bars_dates.xAxis,
axisLabel: {
show: true,
interval: 'auto',
rotate: 0,
margion: 8
type: 'value',
name: name || '',
splitArea: { show: true }
series: bars_dates.series
return $.extend({}, monLineOption, option);
……..//其他的图表配置，如柱图+折线、地图
2.4 图形的渲染
在配置好图表类型的option之后，就可进行图表的渲染了，具体的代码实现如下：
RenderChart: function (option) {
'echarts',
'echarts/chart/line',
'echarts/chart/bar',
'echarts/chart/pie',
'echarts/chart/k',
'echarts/chart/scatter',
'echarts/chart/radar',
'echarts/chart/chord',
'echarts/chart/force',
'echarts/chart/map'
function (ec) {
if (option.chart && option.chart.dispose)
option.chart.dispose();
option.chart = echarts.init(option.container);
window.onresize = option.chart.
option.chart.setOption(option.option, true);
……..//渲染其他的图表类型，如：地图
3.& 具体页面的使用
经过2步骤中的一些列的配置、处理、初始化，我们就可以具体的使用了，在每一个aspx页面使用之前，我们首先需要在页面的标题引入以下的文件：
&script src=&/Scripts/jquery-1.4.1.js& type=&text/javascript&&&/script&
&script src=&/Statics/echarts/esl.js& type=&text/javascript&&&/script&
&script src=&/Statics/ECharts.js& type=&text/javascript&&&/script&
引入之后就可进行使用了，下面演示几个常用的图表的使用：
首页每个aspx页面上都有一个div用来做渲染图表的容器，如下：
&div id=&echart& style=&width:100%; height:400&&&/div&
3.1.1 实现代码
&script type=&text/javascript&&
function () {
var data = [{ name: 'olive', value: 20 }, { name: 'only', value: 20 }, { name: 'momo', value: 20}];
var option = ECharts.ChartOptionTemplates.Pie(data);
var container = $(&#echart&)[0];
opt = ECharts.ChartConfig(container, option);
ECharts.Charts.RenderChart(opt);
3.1.2 展示效果
3.2.1 实现代码
&script type=&text/javascript&&
function () {
var data = [{ name: 'olive', value: 20 }, { name: 'only', value: 20 }, { name: 'momo', value: 20}];
var option = ECharts.ChartOptionTemplates.Bar(data);
var container = $(&#echart&)[0];
opt = ECharts.ChartConfig(container, option);
ECharts.Charts.RenderChart(opt);
function () {
var data = [{ name: '2014-01', value: 20, group: 'A' }, { name: '2014-01', value: 40, group: 'B' }, { name: '2014-02', value: 30, group: 'A' }, { name: '2014-02', value: 10, group: 'B' }, { name: '2014-03', value: 200, group: 'A' }, { name: '2014-03', value: 60, group: 'B' }, { name: '2014-04', value: 50, group: 'A' }, { name: '2014-04', value: 45, group: 'B' }, { name: '2014-05', value: 110, group: 'A' }, { name: '2014-05', value: 80, group: 'B' }, { name: '2014-06', value: 90, group: 'A' }, { name: '2014-06', value: 60, group: 'B'}];
var option = ECharts.ChartOptionTemplates.Bars(data,'Love');
var container = $(&#echart&)[0];
opt = ECharts.ChartConfig(container, option);
ECharts.Charts.RenderChart(opt);
var option = ECharts.ChartOptionTemplates.Bars(data, 'Love', true);
var container = $(&#echart1&)[0];
opt = ECharts.ChartConfig(container, option);
ECharts.Charts.RenderChart(opt);
3.2.2展示效果
3.3 折线图
3.3.1 实现代码
&script type=&text/javascript&&
$(function () {
var data = [
{ name: '2013-01', group: 'olive', value: 116 },
{ name: '2013-01', group: 'momo', value: 115 },
{ name: '2013-01', group: 'only', value: 222 },
{ name: '2013-01', group: 'for', value: 324 },
{ name: '2013-02', group: 'olive', value: 156 },
{ name: '2013-02', group: 'momo', value: 185 },
{ name: '2013-02', group: 'only', value: 202 },
{ name: '2013-02', group: 'for', value: 34 },
{ name: '2013-03', group: 'olive', value: 16 },
{ name: '2013-03', group: 'momo', value: 51 },
{ name: '2013-03', group: 'only', value: 22 },
{ name: '2013-03', group: 'for', value: 84 }
var opt = HighChart.ChartOptionTemplates.Line(data, 'Love-Rate', &折线图示例&);
var container = $(&#container&);
HighChart.RenderChart(opt, container);
function () {
var data = [{ name: '2014-01', value: 20, group: 'A' }, { name: '2014-01', value: 40, group: 'B' }, { name: '2014-02', value: 30, group: 'A' }, { name: '2014-02', value: 10, group: 'B' }, { name: '2014-03', value: 200, group: 'A' }, { name: '2014-03', value: 60, group: 'B' }, { name: '2014-04', value: 50, group: 'A' }, { name: '2014-04', value: 45, group: 'B' }, { name: '2014-05', value: 110, group: 'A' }, { name: '2014-05', value: 80, group: 'B' }, { name: '2014-06', value: 90, group: 'A' }, { name: '2014-06', value: 60, group: 'B'}];
var option = ECharts.ChartOptionTemplates.Lines(data,'lines',false);
var container = $(&#echart&)[0];
opt = ECharts.ChartConfig(container, option);
ECharts.Charts.RenderChart(opt);
var option = ECharts.ChartOptionTemplates.Lines(data, 'lines', true);
var container = $(&#echart1&)[0];
opt = ECharts.ChartConfig(container, option);
ECharts.Charts.RenderChart(opt);
3.3.2展示效果
3.4 柱图+折线（增幅）图
3.4.1 展示效果
3.5.3 展示效果
到这里，基本就把echart的抽象跟使用讲完了，因为时间的关系，还有一些图形的配置、数据处理没有列出代码，但是基本上实现都差不多。希望能给大家带来一些帮助和启发。后续会继续推出HightCharts的抽象使用，敬请期待。
相关搜索：
相关阅读：
相关频道：
&&&&&&&&&&&&&&&&&&
WEB前端教程最近更新39555人阅读
JavaScript开发（5）
一：HighChart介绍
基于JQuery的纯JavaScript的图标库，支持各种图表显示，同时还支持Mootools
与Prototype详细版本支持在这里：
1.3.2 - 1.9.x. 2.0.x for modern browsers
1.2.5 - 1.4.5
支持目前市场几乎所有的主要浏览器IE, Chrome, FF,Safari, Opera等。其图形渲染完
全是是基于SVG与VML方式，其中VML方式主要是兼容IE浏览器，在IE9+及其它浏览
器上渲染技术都是基于SVG方式。下载与安装指导文档
-&安装好以后，建一个基本static web 项目，如图
二：HighChart基本的Bar Chart演示
打开链接-&
拷贝your first chart中第二步中的全部script脚本到mydemo.html中的&script&&/script&
之间。导入JQuery与highchart库文件支持。代码如下：
&scriptsrc=&static/jquery-1.9.1/jquery-1.9.1.min.js&&&/script&
&scriptsrc=&static/highcharts-3.0.1/js/highcharts.js&&&/script&
在tomcat中部署demo1之后访问如下URL：
在浏览器中看到如下Bar Chart：
三：清除HighChart中的数据集(remove data series from high chart object)
代码修改：
1.&&&&&&把type：’bar’ 改成type: ’column’ 其作用是让bar垂直显示
2.&&&&&&向script尾部追加如下代码，自动清除所有series然后刷新
&&&&&&&&&&& setTimeout(function(){
&&& &&&&&&&&&&&var series=chart.&&&&&&&&&&&&
&&& &&&&&&&&&&&while(series.length & 0) {
&&& &&&&&&&&&&&&&&& series[0].remove(false);
&&& &&&&&&&&&&& }
&&& &&&&&&&&&&& chart.redraw();
&&&&&&&&&&&},2000);
四：向HighChart中添加data series(add new data series into high chart object)
向script的尾部追加如下代码，实现添加data series并刷新bar chart
&&&&&&&&&&& setTimeout(function(){
&&&&&&&&&&& & chart.addSeries({&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&& &&&&&&&& id:1,
&&&&&&& &&&&&&&& name:&gloomyfish&,
&&&&&&& &&&&&&&& data:[1,2,3]
&&&&&&& &&&& },false);
&&&&&&&&&&& & chart.addSeries({&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&& &&&&&&&& id:2,
&&&&&&& &&&&&&&& name:&wang-er-ma&,
&&&&&&& &&&&&&&& data:[5,2,1]
&&&&&&& &&&& },false);
&&&&&&&&&&& & chart.addSeries({&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&& &&&&&&&& id:3,
&&&&&&& &&&&&&&& name:&zhang-san&,
&&&&&&& &&&&&&&& data:[4,8,6]
&&&&&&& &&&& },false);
&&& &&&&&&&&&&& chart.redraw();
&&&&&&&&&&&},2000);
addSeries方法中第二个参数false表示不重绘plot，等所有series添加完成调用redraw
方法重绘。
五：在chart中清除high chart官方链接(remove high chart official hyperlink in chart)
仔细观察在Bar Chart的右下角有个highchart的官方链接，当然希望去掉，只要在chart
声明中将credits声明设置改为false即可。代码如下：
credits: {enabled:
false// remove high chart logo hyper-link},
六：完整Demo源码
&script src=&static/jquery-1.9.1/jquery-1.9.1.min.js&&&/script&
&script src=&static/highcharts-3.0.1/js/highcharts.js&&&/script&
&title&My Demo 1&/title&
$(function() {
// initialization chart and actions
$(document).ready(function () {
chart = new Highcharts.Chart({
renderTo: 'my_container',
type: 'column'
text: 'Fruit Consumption'
categories: ['Apples', 'Bananas', 'Oranges']
text: 'Fruit eaten'
credits: {
enabled: false // remove high chart logo hyper-link
series: [{
name: 'Jane',
data: [1, 0, 4]
name: 'John',
data: [5, 7, 3]
// JQuery, mouse click event bind with dom buttons
$('#clear-button').on('click', function (e) {
clearPlot();
$('#refresh-button').on('click', function (e) {
refreshPlot();
// clear all series of the chart
function clearPlot() {
//console.log(&clear plot data!!!&);
var series=chart.
while(series.length & 0) {
series[0].remove(false);
chart.redraw();
function refreshPlot() {
//console.log(&refresh plot data!!!&);
chart.addSeries({
name: &gloomyfish&,
data: [1,2,3]
}, false);
chart.addSeries({
name: &wang-er-ma&,
data: [5,2,1]
}, false);
chart.addSeries({
name: &zhang-san&,
data: [4,8,6]
}, false);
chart.redraw();
setTimeout(function(){
var series=chart.
while(series.length & 0) {
series[0].remove(false);
chart.redraw();
// add new series for the chart
setTimeout(function(){
chart.addSeries({
name: &gloomyfish&,
data: [1,2,3]
}, false);
chart.addSeries({
name: &wang-er-ma&,
data: [5,2,1]
}, false);
chart.addSeries({
name: &zhang-san&,
data: [4,8,6]
}, false);
chart.redraw();
&h1&High Chart Demo 1&/h1&
&div id=&my_container& style=&width:600 height:600&&&/div&
&div id=&btn-group&&
&button type=&button& id=&clear-button&&Clear Plot&/button&
&button type=&button& id=&refresh-button&&Draw Plot&/button&
&/html&运行效果如下：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：2317421次
积分：21381
积分：21381
排名：第299名
原创：244篇
评论：1254条
独立图像处理开发者
图像处理与对象识别算法外包
OCR与美化类滤镜开发
安卓与IOS图像类应用开发
OpenCV学习群:
学习图像处理技术关注
公众号：【OpenCV学堂】
个人联系方式：
《Java数字图像处理-编程技巧与应用实践》
文章：14篇
阅读：228100
文章：68篇
阅读：873902
(1)(5)(1)(4)(4)(5)(6)(4)(1)(3)(2)(1)(1)(3)(3)(7)(5)(2)(1)(1)(1)(2)(1)(1)(1)(2)(1)(1)(3)(1)(4)(7)(5)(5)(3)(4)(9)(6)(4)(4)(2)(6)(6)(7)(6)(6)(4)(7)(10)(8)(7)(7)(8)(4)(4)(3)(5)(3)(1)(1)(3)(2)(2)(1)(1)(3)(1)(1)(4)网站/报表作图4大插件 echarts/highcharts/amcharts/FusionCharts
作者:admin&&&&时间: 16:20:38&&&&浏览:
很多网站尤其是需要统计报表类的网站，都要作图，因此，作图插件越来越受欢迎。根据用户的各种需求，这些插件也在不断开发扩展功能，应用范围越来越广。而在众多的作图插件中，国内使用人数最多、最受欢迎的无疑是百度开发的echarts和挪威的highcharts了，此外，FusionCharts、amcharts等也有大批用户使用。今天，我们就来看看这几款插件吧。1、echarts网页作图插件中，由百度开发的echarts，由于提供详尽的中文文档，各种图例也更符合国人需要，因此，多数人都选择echarts插件来作图，其中包括cnzz的&增值服务&统计图cnzz&增值服务&使用echarts作图echarts目前可做15种图形，包括：&散点图、折线图、柱状图、地图、饼图、雷达图、K线图、箱线图、热力图、关系图、矩形树图、平行坐标图、桑基图、漏斗图、仪表盘。echarts各种图例（点击图片放大）echarts有非常详尽的使用文档、教程、配置手册，配有大量的实例，简单易懂，无须花太多时间研究就能照着例子作出自己需要的图来。echarts地址：/2、highchartshighcharts可以说是一款优秀的老牌作图插件了，在国内外都有非常多的用户。监控宝作图使用的便是highcharts。highcharts的图例非常丰富，比百度的echarts丰富很多，基本适合各种各样的需要。它分为三大类：Highcharts、Highstock、Highmaps，其中Highcharts包含线状图、柱状图、饼状图、混合图等等起码几十种；Highstock包含证券类图形，种类非常多，有几十种，而百度的echart只有一种K线图；Highmaps则是世界地图，baidu的echarts是国内地图。highcharts图例（点击图片放大）highcharts配有详尽的使用文档和实例，使用也很简单，很容易上手，不过，Highcharts没有中文文档，对于那些E文恐惧症的人来说，可能不太愿意接触。不得不说的是，highcharts还包括一个其他作图插件不能匹敌的功能，那就是 Highcharts Cloud（Highcharts 云服务）。Highcharts云服务提供简单便捷的方法生成可视化图表，用户不再需要编程基础，只需要复制数据即可生成漂亮，可定制的图表。云服务提供图表生成，托管，分享等功能。主要特点：强大交互性、强大的分享功能、响应式。Highcharts 云服务highcharts地址：/3、amchartsamcharts这个作图插件，也算比较老牌了，2010年监控宝网站刚成立时就是用这个款插件来作图的，而现在，搜狗联盟还用这款插件来作统计图，可见其用户之多。amcharts是一个利用Flash生成chart图的插件，amCharts分为四类chart图：Flash charts、Flex charts、WPF&Silverlight& charts和Flash maps，可见其能生成的chart图是非常丰富多样的。详见介绍。amcharts作图同样可分为三大类：普通图形、证券图和地图。amcharts作图（点击图片放大）&amcharts同样有很详细的使用教程和实例，不过都是英文网页。amcharts地址：/amcharts教程地址：/tutorials/4、FusionChartsFusionCharts是一款非常优秀的、使用非常广的作图插件，它是一款以Flash为载体的图形插件，因此，它可以设计出非常丰富且动感十足的动态图形来，深受欢迎。cnzz旧版就是用此款插件来作图的，还有的统计图也是用它来设计的。FusionCharts作图（点击图片放大）&FusionCharts能够做出非常丰富的图形，由于其使用flash作图，因此，可以设计出各种3D动态图片来，这是其他作图插件不所具备的优点。因此，对于那些要求制作出3D动态效果图的网站来说，FusionCharts绝对是最佳的选择。
如果需要鼠标与图形做一些交互，例如放大缩小图形，拖动图形，旋转图形等，那么FusionCharts都能满足你的要求。此外，FusionCharts同样能作出世界各大洲地图的图表。总之，如果你想轻易就制作出动态的、或3D效果的、或需要交互的图形，那么FusionCharts将是你的不二选择。FusionCharts地址：/
把文章分享到：
QQ交流群（）9825人阅读
JavaScript和jQuery（23）
当使用highchart图表插件时，如果服务器返回的数据为空，那么在页面上就会显示一大块没有内容的空白，显得很难看，因此需要寻找解决方案，起码也得显示一条无数据的提示吧？
返回数据为空时，直接return，不去执行highcharts方法，然后在相应位置添加提示。
在highchart图表内部显示无数据的提示文字
方法二在GOOGLE上找到了答案。
&script src=&/highcharts.js&&&/script&
&script src=&/master/modules/no-data-to-display.src.js&&&/script&
&script src=&/modules/exporting.js&&&/script&
&div id=&container& style=&min-width: 310 height: 400 margin: 0 auto&&&/div&
&button id=&add&&Add data&/button&
&button id=&remove&&Remove data&/button&
&button id=&showCustom&&Show custom message manually&/button&
Demonstrate no-data-to-display plugin.
The plugin will automatically display a customizable message when there is no data visible in the chart.
It can alternatively be displayed/hidden at any time manually, optionally with custom text. There is also
a new function &hasData()& for charts and series, returning true if there is data visible in the plot area.
$(function () {
var chart,
btnRemove = $('#remove'),
btnAdd = $('#add'),
btnShow = $('#showCustom');
btnAdd.click(function () {
chart.series[0].addPoint(Math.floor(Math.random() * 10 + 1));
btnRemove.click(function () {
if(chart.series[0].points[0]) {
chart.series[0].points[0].remove();
// Show a custom message
btnShow.click(function () {
if(!chart.hasData()) {
// Only if there is no data
chart.hideNoData(); // Hide old message
chart.showNoData(&Your custom error message&);
$('#container').highcharts({
text: 'No data in line chart - with custom options'
series: [{
type: 'line',
name: 'Random data',
// Custom language option
//noData: &Nichts zu anzeigen&
/* Custom options */
// Custom positioning/aligning options
position: {
//align: 'right',
//verticalAlign: 'bottom'
// Custom svg attributes
//'stroke-width': 1,
//stroke: '#cccccc'
// Custom css
//fontWeight: 'bold',
//fontSize: '15px',
//color: '#202030'
chart = $('#container').highcharts();
显示效果如图所示：
文章代码引自&
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：453898次
积分：4001
积分：4001
排名：第6925名
原创：52篇
评论：32条
(1)(1)(1)(1)(1)(3)(2)(1)(5)(2)(1)(1)(1)(10)(2)(25)}