Question

我是一个CSS新手...我有一个看起来很棒的图表和一个看起来非常基础的HTML表格。我希望表格与图表的样式（字体，字体大小等）相匹配。

我将highcharts.css文件包含在HTML的头部，并在收费定义中添加了styledMode：false。

<head>
<link rel="stylesheet" type="text/css" href="code/css/highcharts.css">  
</head>

<body>
<script src="code/highcharts.js"></script>
<script src="code/modules/data.js"></script>
<script src="code/modules/drilldown.js"></script>

<table border='1' width='100%'>
rows here...                
</table>   

<div id="container2" style="min-width: 310px; max-width: 100%; height: 400px; margin: 0 auto"></div>        


<script type="text/javascript">

Highcharts.chart('container2', {

    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie',
        styledMode: true,
    },
    title: {
        text: 'Web Firewall - Top 3',
        style: {"fontSize": "15px", "color":"red" },
    },
   subtitle: {
        text: 'Source: Something  Firewall'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.y}',
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                }
            }
        }
    },
    series: [{
        name: 'Block %',
        colorByPoint: true,
        data: 
[{"name":"www.blah.org","y":44124},{"name":"menus.foo.org","y":1602},{"name":"mmm.boo.org","y":508}]    }]
});
</script>
</body>

获取页面以匹配highcharts样式

0 个答案: