开源图表库Highcharts教程：如何在R中使用Highcharts JavaScript语法-控件新闻-慧都网

开源图表库Highcharts教程：如何在R中使用Highcharts JavaScript语法

原创|行业资讯|编辑：杨鹏连|2020-12-14 13:14:55.093|阅读 410 次

概述：本教程将向您展示如何在R中使用JavaScript语法自定义和调整交互式图表。我们将使用Highcharter（Highcharts R包装器）来构建交互式图表，并使用Highcharts API（以Javascript语言）自定义R代码。

#慧都22周年庆大促·界面/图表报表/文档/IDE/IOT/测试等千款热门软控件火热促销中>>

Highcharts是一款纯JavaScript编写的图表库，为你的Web网站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、散点图、角度测量图、区域排列图、区域曲线排列图、柱形排列图、极坐标图等几十种图表类型。

点击下载Highcharts最新试用版

本教程将向您展示如何在R中使用JavaScript语法自定义和调整交互式图表。我们将使用Highcharter（Highcharts R包装器）来构建交互式图表，并使用Highcharts API（以Javascript语言）自定义R代码。

扰流警报，在R中使用JavaScript非常容易。您要做的就是将JavaScript代码包装到List（）方法中。

让我们以纯Highcharts / JavaScript制作的这个演示为例：

该示例包括事件和方法，例如render（）和dataLabels.formatter函数，它们可以实现动态更改以及与图表的交互。
现在，如果您想在R中使用相同的事件和方法的JavaScript代码，则所要做的就是使用list（）方法，然后复制并粘贴JavaScript代码。在我们的示例中，在R代码中添加events = list()和dataLabels = list()（源GitHub）：

...
    events = list(render = JS("function() {
        const chart = this,
          data = chart.series[0].data;
        let pointsToProject = [];
        (chart.myCustomCircles || []).forEach(function(circle) {
          circle.destroy();
        }); 
        chart.myCustomCircles = []; 
        pointsToProject = chart.series[0].points.filter(function(point) {
          return point.flag && point.isInside;
        });
        // Where to draw a circle
        pointsToProject.forEach(function(point) {
          const customCircle = chart.renderer.circle(
              chart.plotLeft + point.plotX,
              chart.plotSizeY + chart.plotTop,
              4
            )
            .attr({
              fill: 'red',
              zIndex: 2
            })
            .add();
          chart.myCustomCircles.push(customCircle);
        });
        // Where to render the text
        if (!chart.myCustomText) {
          chart.myCustomText = chart.renderer.text(
              ',
              chart.plotLeft,
              35
            )
            .add();
        }
        chart.myCustomText.attr({
          text: 'Number of points with max value: ' + pointsToProject.length,
        });
      }
      "
    ))
...

    series = list(
      dataLabels = list(
        enabled = TRUE,
        formatter = JS("function() {
          let visiblePoints = this.series.points.filter(function(point) {
              return point.isInside;
            }),
            max = visiblePoints.reduce(function(acc, cur) {
              return Math.max(cur.y, acc);
            }, 0);
          if (this.y === max) {
            this.point.flag = true;
            return this.y;
          } else {
            this.point.flag = false;
          }
        }
        "
      )
    )

您也可以使用简化的模板。例如，下面的代码使您可以动态更改图表背景。这段代码是创建自己的高级配置的良好起点：

library('highcharter')
highchart() % > %
  hc_add_series(
    type = "line",
    data = list(5, 4, 3, 5)
  ) % > %
  hc_chart(events = list(load = JS("function() {
      var chart = this; chart.update({
        chart: {
          backgroundColor: '#FCFFC5'
        }
      }); console.log('Updated chart background color!');
    }
    ")
  ))

概括地说，您可以在可以在可用的Highcharts API选项中编写常规JavaScript函数的地方使用这种自定义方法。

我们鼓励您使用在这里学到的知识来使用R创建交互式图表，欢迎您在本文中提出您的问题和评论！