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!');
    }
    ")
  ))

我們鼓勵您使用在這里學到的知識來使用R創建交互式圖表，歡迎您在本文中提出您的問題和評論！