jQuery 是一种 JavaScript 库,用于简化 HTML 文档遍历和操作、事件处理、动画和 Ajax。它是极具优势的跨浏览器 JavaScript 库。使用 jQuery 可以轻松地实现柱形图,而最好的 jQuery 柱形图插件是 JQuery Sparklines。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sparklines/2.1.2/jquery.sparkline.min.js"></script>
<script>
var sparklineHeight = '150px';
var barWidth = '20px';
$('#bar-chart').sparkline([2, 1, 4, 6, 8, 7, 5], {
type: 'bar',
barWidth: barWidth,
height: sparklineHeight,
barColor: 'green'
});
$('#line-chart').sparkline([2, 1, 4, 6, 8, 7, 5], {
type: 'line',
width: '200px',
height: sparklineHeight,
lineColor: 'blue',
fillColor: 'white',
spotRadius: 5,
lineWidth: 2,
minSpotColor: 'red',
maxSpotColor: 'red',
highlightSpotColor: 'yellow',
highlightLineColor: 'yellow',
});
$('#pie-chart').sparkline([2, 1, 4, 6, 8, 7, 5], {
type: 'pie',
width: sparklineHeight,
height: sparklineHeight,
sliceColors: ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']
});
$('#box-chart').sparkline([2, 1, 4, 6, 8, 7, 5], {
type: 'box',
width: '200px',
height: sparklineHeight,
boxLineColor: 'purple',
boxFillColor: 'pink',
whiskerColor: 'grey',
outlierLineColor: 'blue',
});
</script>以上代码中,我们定义了柱形图,折线图,饼图以及箱形图的样式。它们的使用方法是非常简单的。只需要在 HTML 文件中添加一个 div 标签,并给它一个唯一的 id 名称,然后在 JavaScript 中使用 JQuery Sparklines 插件引用这个 div id 并传递数据就可以了。
总体来说,使用 jQuery 插件制作柱形图非常简单。它可以很容易地被集成到现有项目中,这意味着您可以在短时间内实现高质量的柱形图并确保良好的用户体验。