91自拍网,国产精品不卡在线,午夜国产免费观看

開源圖表庫Highcharts教程：如何在R中使用Highcharts JavaScript語法

原創|行業資訊|編輯：楊鵬連|2020-12-14 13:14:55.093|閱讀 390 次

概述：本教程將向您展示如何在R中使用JavaScript語法自定義和調整交互式圖表。我們將使用Highcharter（Highcharts R包裝器）來構建交互式圖表，并使用Highcharts API（以Javascript語言）自定義R代碼。

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

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創建交互式圖表，歡迎您在本文中提出您的問題和評論！