非常好用的 Highslide JS ，完全可以代替 lightbox

最新推荐文章于 2024-10-03 12:29:25 发布

iteye_5904

最新推荐文章于 2024-10-03 12:29:25 发布

阅读量176

点赞数

分类专栏： Javascript /Jquery / Bootstrap / Web 文章标签： JavaScript CSS IE HTML 浏览器 ViewUI

Javascript /Jquery / Bootstrap / Web 专栏收录该内容

434 篇文章

订阅专栏

本文介绍 Highcharts JS，一款纯 JavaScript 制图库，支持多种图表类型，如折线图、柱状图、饼图等，并提供了丰富的自定义选项。示例展示了如何在网页中集成 Highcharts 图表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主页：

http://highslide.com/

实例：

http://highslide.com/index.htm

自定义下载：

http://highslide.com/editor/

文档

http://highslide.com/ref/

图表

http://www.highcharts.com/demo/

Highcharts JS是一个纯JavaScript制图Library，支持的图表类型包括：line、spline、area、areaspline、column、 bar、pie和scatter。当鼠标移到图表上时会利用一个tooltip展示每一点或区域上相关的文本信息。可以放大图表，查看某部分更详细的数据。Highcharts支持大部分浏览器包括iPhone和IE6。源码及实例

附上一个小技巧：

<script type="text/javascript">
    hs.graphicsDir = 'highslide/graphics/';
    hs.showCredits = false;
</script>

通过设置showCredits 的属性可以控制 gallery左上角是否出现 “powered by highslide js” 的超链接，当然，您也可以直接在highslide.js 文件中直接修改它的值。

实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Highslide JS - Custom Example</title>

<script type="text/javascript" src="highslide/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="highslide/highslide-ie6.css" />
<![endif]-->

<script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
hs.outlineType = 'custom';
hs.captionEval = 'this.a.title';
</script>

</head>
<body>
<h3>Single image</h3>
<div style="text-align: justify">

	<a href="highslide/sample-images/full-image.jpg" class="highslide" οnclick="return hs.expand(this)"
			
			title="Caption from the anchor's title attribute" style="float:right; margin: 0 0 10px 15px">
		<img src="highslide/sample-images/thumbnail.jpg"  alt=""
			style="width: 107px;height:120px;" />
	</a>

	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
	Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
	fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
	qui officia deserunt mollit anim id est laborum.</p>
</div>

</body>
</html>