原創|行業資訊|編輯:楊鵬連|2020-12-14 13:14:55.093|閱讀 400 次
概述:本教程將向您展示如何在R中使用JavaScript語法自定義和調整交互式圖表。我們將使用Highcharter(Highcharts R包裝器)來構建交互式圖表,并使用Highcharts API(以Javascript語言)自定義R代碼。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
Highcharts是一款純JavaScript編寫的圖表庫,為你的Web網站、Web應用程序提供直觀、交互式圖表。當前支持折線、曲線、區域、區域曲線圖、柱形圖、條形圖、餅圖、散點圖、角度測量圖、區域排列圖、區域曲線排列圖、柱形排列圖、極坐標圖等幾十種圖表類型。
本教程將向您展示如何在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函數的地方使用這種自定義方法。
我們鼓勵您使用在這里學到的知識來使用R創建交互式圖表,歡迎您在本文中提出您的問題和評論!
APS幫助提升企業生產效率,真正實現生產計劃可視化呈現與控制,快速有效響應不同場景的生產計劃,提高準時交貨能力,提高產能和資源利用率
想要購買Highcharts正版授權,或了解更多產品信息請點擊
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自: