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

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

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

Highcharts最新试用版

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

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

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

...    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函数的地方使用这种自定义方法。

APS帮助提升企业生产效率，真正实现生产计划可视化呈现与控制,快速有效响应不同场景的生产计划，提高准时交货能力，提高产能和资源利用率

想要购买Highcharts正版授权，或了解更多产品信息请点击【咨询在线客服】

标签：