CSS 如何在 Bootstrap 中实现图表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18651693/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I implement charts in Bootstrap?
提问by Daryll Santos
I'm referring to the bar charts in the background (they are actually really subtle) of the repositories here: Example: https://github.com/search?l=ruby&q=stars%3A%3E1&s=forks&type=Repositories
我指的是这里存储库背景中的条形图（它们实际上非常微妙）：示例：https: //github.com/search?l =ruby&q=stars%3A%3E1&s=forks&type=Repositories
What I have is a table, and I want the background of the table cells to be a bar-chart of the user's progress. Any pointers on how I get this thing done?
我有一个表格，我希望表格单元格的背景是用户进度的条形图。关于我如何完成这件事的任何指示？
回答by rony36
I would like to suggest you to use HighCharts. It's just awesome and easy to integrate.
我想建议你使用HighCharts。它非常棒且易于集成。
Example:
例子：
HTML:
HTML:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Script:
脚本：
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
]
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
name: 'New York',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
}, {
name: 'London',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}, {
name: 'Berlin',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}]
});
});
And here is the fiddle.
这是小提琴。
回答by Lan
Github did this using the HTML canvaselement.
Github 使用 HTML画布元素做到了这一点。
This specification defines the 2D Context for the HTML canvas element. The 2D Context provides objects, methods, and properties to draw and manipulate graphics on a canvas drawing surface.
该规范定义了 HTML 画布元素的 2D 上下文。2D 上下文提供对象、方法和属性来在画布绘图表面上绘制和操作图形。
If you use a browser inspector, you see inside every list element a div with a canvaselement.
如果您使用浏览器检查器，您会在每个列表元素中看到一个带有画布元素的 div 。
<div class="participation-graph">
<canvas class="bars" data-color-all="#F5F5F5" data-color-owner="#F5F5F5" data-source="/mxcl/homebrew/graphs/owner_participation" height="80" width="640"></canvas>
</div>
With CSS (z-index, position...) you can put that canvas in the background of a li element or table, in your case.
使用 CSS (z-index, position...)，您可以将该画布放在 li 元素或表格的背景中，在您的情况下。
Do a searchabout jquery pluggins that fit your requirement.
做一个搜索有关适合您需求的jQuery pluggins。
Hope this pointers help you to achieve that.
希望这些指针可以帮助您实现这一目标。
回答by Alex Mazzariol
Later than my previous answer, but may be useful anyway; while gRapha?l Charting may be an outdated alternative, a more recent and nicer option may be http://chartjs.org- still without any Flash, with a MIT license, and a recently updated GitHub.
比我之前的答案晚，但无论如何可能有用；虽然 gRapha?l Charting 可能是一个过时的替代方案，但更新和更好的选择可能是http://chartjs.org- 仍然没有任何 Flash，具有 MIT 许可证和最近更新的 GitHub。
I've been using it myself since my last answer, so now I have some web apps with one and some with the other.
自从我上次回答以来，我自己一直在使用它，所以现在我有一些网络应用程序和另一个网络应用程序。
If you are starting a project anew, try with Chart.js first.
如果您要重新开始一个项目，请先尝试使用 Chart.js。
回答by Zim
Update 2018
2018 年更新
Here's a simple example using Bootstrap 4with ChartJs. Use an HTML5 Canvas element for the chart...
这是一个使用Bootstrap 4和 ChartJs的简单示例。为图表使用 HTML5 Canvas 元素...
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<canvas id="chLine"></canvas>
</div>
</div>
</div>
</div>
</div>
And then the appropriate JS to populate the chart...
然后使用适当的 JS 来填充图表...
var colors = ['#007bff','#28a745'];
var chLine = document.getElementById("chLine");
var chartData = {
labels: ["S", "M", "T", "W", "T", "F", "S"],
datasets: [{
data: [589, 445, 483, 503, 689, 692, 634],
borderColor: colors[0],
borderWidth: 4,
pointBackgroundColor: colors[0]
},
{
data: [639, 465, 493, 478, 589, 632, 674],
borderColor: colors[1],
borderWidth: 4,
pointBackgroundColor: colors[1]
}]
};
if (chLine) {
new Chart(chLine, {
type: 'line',
data: chartData,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: false
}
}]
},
legend: {
display: false
}
}
});
}
回答by Alex Mazzariol
Definitely late to the party; anyway, for those interested, picking up on Lan's mention of HTML5 canvas, you can use gRapha?l Chartingwhich has a MIT License (instead of HighCharts dual license). It's not Bootstrap-specific either, so it's more of a general suggestion.
聚会肯定迟到了；无论如何，对于那些感兴趣的人，如果注意到Lan 提到的 HTML5 画布，您可以使用具有 MIT 许可证（而不是 HighCharts 双许可证）的gRapha?l Charting。它也不是特定于 Bootstrap 的，所以它更像是一个一般性建议。
I have to admit that HighCharts demos seem very pretty, and I have to warn that gRapha?l is quite hard to understand before becoming proficient with it. Anyway you can easily add nice features to your gRapha?l charts (say, tooltips or zooming effects), so it may be worth the effort.
我不得不承认 HighCharts 演示看起来非常漂亮，我必须警告说，在熟练掌握 gRapha?l 之前，它很难理解。无论如何，您可以轻松地向您的 gRapha?l 图表添加漂亮的功能（例如，工具提示或缩放效果），因此这可能是值得的。
