前段报表Highcharts

本是古典何须时尚 2022-05-12 05:50 173阅读 0赞

资料下载： [http://www.highcharts.com/download][http_www.highcharts.com_download]  
下载文件：![这里写图片描述][70]  
解压后打开：  
![这里写图片描述][70 1]  
我们将js下的所有文件复制到我们的项目中就可以使用了，比如我放在highcharts文件夹下  
**1.引入highcharts文件**：

2.打开解压文件中的index.htm文件，在浏览器中打开后我们可以看到各种类型图表，我们只需查看源代码复制过来使用就行了  
3.以柱状图为例：  
第一步,找到柱状图的demo:  
![这里写图片描述][70 2]  
这里我选择的是Colume with drilldown点开后：  
![这里写图片描述][70 3]  
接下来右击鼠标查看源代码，整段复制到我们的html中，然后修改我们需要的字段就行了：  
源代码：

<!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>Highcharts Example</title>
    
            <script src="../../js/jquery-1.8.3.min.js"></script>
            <style type="text/css"> ${ demo.css} </style>
            <script type="text/javascript"> $(function () { Highcharts.data({ csv: document.getElementById('tsv').innerHTML, itemDelimiter: '\t', parsed: function (columns) { var brands = {}, brandsData = [], versions = {}, drilldownSeries = []; // Parse percentage strings columns[1] = $.map(columns[1], function (value) { if (value.indexOf('%') === value.length - 1) { value = parseFloat(value); } return value; }); $.each(columns[0], function (i, name) { var brand, version; if (i > 0) { // Remove special edition notes name = name.split(' -')[0]; // Split into brand and version version = name.match(/([0-9]+[\.0-9x]*)/); if (version) { version = version[0]; } brand = name.replace(version, ''); // Create the main data if (!brands[brand]) { brands[brand] = columns[1][i]; } else { brands[brand] += columns[1][i]; } // Create the version data if (version !== null) { if (!versions[brand]) { versions[brand] = []; } versions[brand].push(['v' + version, columns[1][i]]); } } }); $.each(brands, function (name, y) { brandsData.push({ name: name, y: y, drilldown: versions[name] ? name : null }); }); $.each(versions, function (key, value) { drilldownSeries.push({ name: key, id: key, data: value }); }); // Create the chart $('#container').highcharts({ chart: { type: 'column' }, title: { text: 'Browser market shares. November, 2013' }, subtitle: { text: 'Click the columns to view versions. Source: netmarketshare.com.' }, xAxis: { type: 'category' }, yAxis: { title: { text: 'Total percent market share' } }, legend: { enabled: false }, plotOptions: { series: { borderWidth: 0, dataLabels: { enabled: true, format: '{point.y:.1f}%' } } }, tooltip: { headerFormat: '<span style="font-size:11px">{series.name}</span><br>', pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>' }, series: [{ name: 'Brands', colorByPoint: true, data: brandsData }], drilldown: { series: drilldownSeries } }); } }); }); </script>
        </head>
        <body>
    <script src="../../js/highcharts.js"></script>
    <script src="../../js/modules/data.js"></script>
    <script src="../../js/modules/drilldown.js"></script>
    
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
    
    
    <pre id="tsv" style="display:none">Browser Version  Total Market Share
    Microsoft Internet Explorer 8.0 26.61%
    Microsoft Internet Explorer 9.0 16.96%
    Chrome 18.0 8.01%
    Chrome 19.0 7.73%
    Firefox 12  6.72%
    Microsoft Internet Explorer 6.0 6.40%
    Firefox 11  4.72%
    Microsoft Internet Explorer 7.0 3.55%
    Safari 5.1  3.53%
    Firefox 13  2.16%
    Firefox 3.6 1.87%
    Opera 11.x  1.30%
    Chrome 17.0 1.13%
    Firefox 10  0.90%
    Safari 5.0  0.85%
    Firefox 9.0 0.65%
    Firefox 8.0 0.55%
    Firefox 4.0 0.50%
    Chrome 16.0 0.45%
    Firefox 3.0 0.36%
    Firefox 3.5 0.36%
    Firefox 6.0 0.32%
    Firefox 5.0 0.31%
    Firefox 7.0 0.29%
    Proprietary or Undetectable 0.29%
    Chrome 18.0 - Maxthon Edition   0.26%
    Chrome 14.0 0.25%
    Chrome 20.0 0.24%
    Chrome 15.0 0.18%
    Chrome 12.0 0.16%
    Opera 12.x  0.15%
    Safari 4.0  0.14%
    Chrome 13.0 0.13%
    Safari 4.1  0.12%
    Chrome 11.0 0.10%
    Firefox 14  0.10%
    Firefox 2.0 0.09%
    Chrome 10.0 0.09%
    Opera 10.x  0.09%
    Microsoft Internet Explorer 8.0 - Tencent Traveler Edition  0.09%</pre>
    
        </body>
    </html>

修改后代码：

<!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>柱状图</title>
            <script src="../js/jquery-1.8.3.js"></script>
            <style type="text/css"> </style>
            <script type="text/javascript"> $(function () { Highcharts.data({ csv: document.getElementById('tsv').innerHTML, itemDelimiter: '\t', parsed: function (columns) { var brands = {}, brandsData = [], versions = {}, drilldownSeries = []; // Parse percentage strings columns[1] = $.map(columns[1], function (value) { if (value.indexOf('%') === value.length - 1) { value = parseFloat(value); } return value; }); $.each(columns[0], function (i, name) { var brand, version; if (i > 0) { // Remove special edition notes name = name.split(' -')[0]; // Split into brand and version version = name.match(/([0-9]+[\.0-9x]*)/); if (version) { version = version[0]; } brand = name.replace(version, ''); // Create the main data if (!brands[brand]) { brands[brand] = columns[1][i]; } else { brands[brand] += columns[1][i]; } // Create the version data if (version !== null) { if (!versions[brand]) { versions[brand] = []; } versions[brand].push(['v' + version, columns[1][i]]); } } }); $.each(brands, function (name, y) { brandsData.push({ name: name, y: y, drilldown: versions[name] ? name : null }); }); $.each(versions, function (key, value) { drilldownSeries.push({ name: key, id: key, data: value }); }); // Create the chart $('#container').highcharts({ chart: { type: 'column' }, title: { text: '浏览器市场占额，2018' }, subtitle: { text: '来自维基百科大数据科普' }, xAxis: { type: 'category' }, yAxis: { title: { text: '总占百分比' } }, legend: { enabled: false }, plotOptions: { series: { borderWidth: 0, dataLabels: { enabled: true, format: '{point.y:.1f}%' } } }, tooltip: { headerFormat: '<span style="font-size:11px">{series.name}</span><br>', pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>' }, series: [{ name: '品牌', colorByPoint: true, data: brandsData }], drilldown: { series: drilldownSeries } }); } }); }); </script>
        </head>
        <body>
    <script src="../js/highcharts/highcharts.js"></script>
    <script src="../js/highcharts/modules/data.js"></script>
    <script src="../js/highcharts/modules/drilldown.js"></script>
    
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
    
    
    <pre id="tsv" style="display:none">Browser Version  Total Market Share
    微软 8.0  26.61%
    微软 9.0  16.96%
    谷歌 18.0 8.01%
    谷歌 19.0 7.73%
    火狐 12   6.72%
    微软 6.0  6.40%
    火狐 11   4.72%
    微软 7.0  3.55%
    苹果Safari 5.1    3.53%
    火狐 13   2.16%
    火狐 3.6  1.87%
    挪威Opera 11.x    1.30%
    谷歌 17.0 1.13%
    火狐 10   0.90%
    苹果Safari 5.0    0.85%
    火狐 9.0  0.65%
    火狐 8.0  0.55%
    火狐 4.0  0.50%
    谷歌 16.0 0.45%
    火狐 3.0  0.36%
    火狐 3.5  0.36%
    火狐 6.0  0.32%
    火狐 5.0  0.31%
    火狐 7.0  0.29%
    专有的或不可检测的   0.29%
    谷歌 18.0 - Maxthon Edition   0.26%
    谷歌 14.0 0.25%
    谷歌 20.0 0.24%
    谷歌 15.0 0.18%
    谷歌 12.0 0.16%
    挪威Opera 12.x    0.15%
    苹果Safari 4.0    0.14%
    谷歌 13.0 0.13%
    苹果Safari 4.1    0.12%
    谷歌 11.0 0.10%
    火狐 14   0.10%
    火狐 2.0  0.09%
    谷歌 10.0 0.09%
    挪威Opera 10.x    0.09%
    微软 8.0 - Tencent Traveler Edition   0.09%</pre>
    
        </body>
    </html>

效果图：  
![这里写图片描述][70 4]  
ps:  
title ： 报表标题  
subtitle: 子标题  
xAxis ： 横坐标  
yAxis： 纵坐标  
series： 报表数据

[http_www.highcharts.com_download]: http://www.highcharts.com/download
[70]: /images/20220512/33667c20216147c89875a75d320079a9.png
[70 1]: /images/20220512/b79740a1d1284eceaf52a5618e2c1293.png
[70 2]: /images/20220512/61accf722d674326bdae69a4abfe04f7.png
[70 3]: /images/20220512/f9d6f9b71996489bb0acf83506a62765.png
[70 4]: /images/20220512/6a9eeb0e21d1457c97a6ac746e3f049a.png