能否在R中渲染Highcharts原生JS代码以实现同款可视化？

完全可以实现——利用R Markdown对HTML和JavaScript的原生支持，你可以直接嵌入原生Highcharts的代码，生成和官网演示完全一致的可视化效果。

具体实现步骤 #

1. 引入Highcharts依赖库
   在R Markdown文档中添加HTML代码块，引入Highcharts核心库及打包气泡图所需的模块：

   <script src="https://code.highcharts.com/highcharts.js"></script>
   <script src="https://code.highcharts.com/modules/packedbubble.js"></script>
   <script src="https://code.highcharts.com/modules/exporting.js"></script>
   <script src="https://code.highcharts.com/modules/export-data.js"></script>
   <script src="https://code.highcharts.com/modules/accessibility.js"></script>
   

2. 添加可视化容器
   创建一个用于渲染图表的HTML容器，指定宽高：

   <div id="packedBubbleChart" style="height: 600px; width: 100%;"></div>
   

3. 嵌入原生JS代码
   添加JavaScript代码块，将原生Highcharts打包气泡图的配置代码放入其中，注意指向上面创建的容器ID：

   <script>
   Highcharts.chart('packedBubbleChart', {
       chart: {
           type: 'packedbubble',
           height: '100%'
       },
       title: {
           text: 'Carbon Emissions Worldwide 2021'
       },
       tooltip: {
           useHTML: true,
           pointFormat: '<b>{point.name}:</b> {point.value} Mt CO<sub>2</sub>'
       },
       plotOptions: {
           packedbubble: {
               minSize: '30%',
               maxSize: '120%',
               zMin: 0,
               zMax: 1000,
               layoutAlgorithm: {
                   splitSeries: true,
                   gravitationalConstant: 0.02
               },
               dataLabels: {
                   enabled: true,
                   format: '{point.name}',
                   filter: {
                       property: 'y',
                       operator: '>',
                       value: 20
                   },
                   style: {
                       color: 'black',
                       textOutline: 'none',
                       fontWeight: 'normal'
                   }
               }
           }
       },
       series: [{
           name: 'Europe',
           data: [{
               name: 'Germany',
               value: 673.4
           }, {
               name: 'United Kingdom',
               value: 342.8
           }, {
               name: 'France',
               value: 279.5
           }, {
               name: 'Italy',
               value: 237.6
           }, {
               name: 'Spain',
               value: 193.8
           }]
       }, {
           name: 'Americas',
           data: [{
               name: 'United States',
               value: 4713.4
           }, {
               name: 'Canada',
               value: 556.3
           }, {
               name: 'Brazil',
               value: 476.7
           }, {
               name: 'Mexico',
               value: 436.1
           }]
       }, {
           name: 'Asia',
           data: [{
               name: 'China',
               value: 11472.4
           }, {
               name: 'India',
               value: 2654.9
           }, {
               name: 'Japan',
               value: 1054.8
           }, {
               name: 'South Korea',
               value: 679.1
           }, {
               name: 'Iran',
               value: 609.4
           }]
       }]
   });
   </script>
   

关键注意事项 #

• 必须引入packedbubble.js模块，否则打包气泡图无法正常渲染
• 容器的ID（示例中为packedBubbleChart）要和JS代码中Highcharts.chart()的第一个参数完全匹配
• 可以直接替换原生Highcharts示例中的配置项和数据，完全复用原生库的所有功能，不会受限于highcharter的功能范围

内容的提问来源于stack exchange，提问作者stats_noob