可下钻的Highchart图,工作中用到的,总结了一个小例子,超级实用

$(function () {
    // Create the chart
    $('#container').highcharts({
        chart: {
            type: 'pie'
        },
        title: {
            text: 'Basic drilldown'
        },
        xAxis: {
            type: 'category'
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true
                }
            }
        },
        series: [{
            name: 'Things',
            colorByPoint: true,
            data: [{
                name: 'Animals',
                y: 5,
                drilldown: 'animals'
            }, {
                name: 'Fruits',
                y: 2,
                drilldown: 'fruits'
            }, {
                name: 'Cars',
                y: 4,
                drilldown: 'cars'
            }]
        }],
        drilldown: {
            series: [{
                id: 'animals',
                data: [
                    ['Cats', 4],
                    ['Dogs', 2],
                    ['Cows', 1],
                    ['Sheep', 2],
                    ['Pigs', 1]
                ]
            }, {
                id: 'fruits',
                data: [
                    ['Apples', 4],
                    ['Oranges', 2]
                ]
            }, {
                id: 'cars',
                data: [
                    ['Toyota', 4],
                    ['Opel', 2],
                    ['Volkswagen', 2]
                ]
            }]
        }
    });
});

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

附上需要引的js:

           <script type="text/javascript" src="module/Library/Highcharts/highcharts.js"></script>
            <script type="text/javascript" src="module/Library/Highcharts/highcharts-more.js"></script>
            <script type="text/javascript" src="module/Library/Highcharts/modules/solid-gauge.js"></script>
            <script type="text/javascript" src="module/Library/Highcharts/modules/exporting.src.js"></script>
            <script type="text/javascript" src="module/Plugin/Highcharts/el.HChartsLang.js"></script>

    大家可以去官网下载需要引的包,没找到这么发文件,尴尬,如果实用的话,记得好评

Highcharts支持将表导出为PDF文件。要将多个导出的表文件合并为一个PDF文件,可以使用一些第三方库或在线服务,例如PDFtk、iLovePDF等。 下面是一些基本的步骤: 1. 使用Highcharts导出表为PDF文件,并将其保存到本地计算机上或者服务器上。 2. 在代码使用第三方库或在线服务将每个PDF文件合并为一个文件。 3. 将合并后的PDF文件保存到本地计算机上或者服务器上。 以下是一个使用PDFtk将多个PDF文件合并为一个文件的示例代码: ```javascript // 导出第一个表为PDF文件 Highcharts.exportCharts({ type: 'application/pdf', filename: 'chart1.pdf', sourceWidth: 600, sourceHeight: 400 }, function (pdf) { // 将第一个PDF文件保存到本地计算机或者服务器上 fs.writeFileSync('chart1.pdf', pdf); // 导出第二个表为PDF文件 Highcharts.exportCharts({ type: 'application/pdf', filename: 'chart2.pdf', sourceWidth: 600, sourceHeight: 400 }, function (pdf) { // 将第二个PDF文件保存到本地计算机或者服务器上 fs.writeFileSync('chart2.pdf', pdf); // 使用PDFtk将两个PDF文件合并为一个文件 var cmd = 'pdftk chart1.pdf chart2.pdf cat output merged.pdf'; exec(cmd, function (error, stdout, stderr) { if (error) { console.error('Error merging PDF files:', error); } else { console.log('PDF files merged successfully.'); } }); }); }); ``` 在上面的示例代码,我们首先导出了两个不同的表为PDF文件,然后使用PDFtk将这两个PDF文件合并为一个文件。最终的结果文件为merged.pdf。请注意,PDFtk需要在服务器上安装,并且可以使用exec命令来执行系统命令。如果需要在客户端浏览器合并PDF文件,可以考虑使用在线服务,例如iLovePDF等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值