css – 如何在Bootstrap中实现图表？

我在这里指的是在后台的条形图(实际上真的很微妙)：
示例： https://github.com/search?l=ruby&q=stars%3A%3E1&s=forks&type=Repositories

我所拥有的是一张桌子,我希望表格单元格的背景是用户进度的条形图.任何关于我如何完成这件事的指针？

解决方法

我想建议你使用 HighCharts.它只是真棒和容易的整合.

例：

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>

脚本：

$(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]

            }]
        });
    });

这里是fiddle.

原文地址：https://www.jb51.cc/css/216561.html