AnyChart 开发进阶篇

AnyChart 开发进阶篇
- - 摘要
- Plotly
- - 简介
- 主题定制
- - 获得Anychart 需要的JSON数据
  - 福利---黑色风格的Anychart layout JSON配置
- AnyChart 基础Tools 配置
- Mapbox 地图在Anychart中使用

摘要

Any Chart是一种动态加载数据和样式配置的一种图表。Any Chart 模块可以允许用户构建由Plotly.js提供的数据图类型。更多关于Plotly.js的开发使用在链接: link to Plotly。Any Chart作为一个基础开发部件单元，可以在Mendix Studio Pro的官方开发平台的App Store 中下载。
本篇继: 如何使用Any Chart，对Anychart Widget高级开发进行介绍。
学习本篇前提条件：

对AnyChart基础开发有一定认识和实践。（若不符合，请点击学习基础篇如何使用Any
Chart 进行学习）
对JSON Data有一定基础。

Plotly

简介

Plotly.js是一种支持前端构建静态图，动态图，类似于Echart的一种低代码（Low_code）技术。目前广泛应用于机器学习（Machine Learning）和数据可视化。 Dash是由Plotly提供的一个高效的Python框架，主要针对网页应用的数据可视化。

Chart Studio 是Plotly.js提供，可以进行线上开发 chart的免费的线上版本的Dash。

主题定制

Anychart 是基于Plotly.js 开发的Mendix Studio Pro的widget。Anychart目前在Plotly.js的支持下多个style的主题配置选择。

这些主题来源于plotly.js的线上开发工具Chart Studio.可以通过在Chart Studio上进行主题选择和制作一些自定义的静态Chart。

获得Anychart 需要的JSON数据

首先在左下方找到save 按钮点击保存为public项目（private 收费）。
通过点击图示my files

然后找到刚刚保存的项目，鼠标方上边会出现 Editor和Viewer，点击Viewer

然后选择Python&R这里就有Anychart所需要的JSON数据了。把data和layout的数据分别放在相应Anychart配置数据上。就可以直接在你的Mendix Studio Pro项目的web上查看了。

福利—黑色风格的Anychart layout JSON配置

这里分享一个黑色风格的Anychart layout配置

// JSON Layout 黑色主题
{"title": {"text": "Click to enter Plot title"},"xaxis": {"type": "linear","range": [0.8746584699453552,3.1253415300546448],"autorange": true},"yaxis": {"type": "linear","range": [1.1544885177453028,12.845511482254697],"autorange": true},"ternary": {},"autosize": true,"template": {"data": {"bar": [{"type": "bar","marker": {"colorbar": {"ticks": "","outlinewidth": 0}}}],"table": [{"type": "table","cells": {"fill": {"color": "#506784"},"line": {"color": "rgb(17,17,17)"}},"header": {"fill": {"color": "#2a3f5f"},"line": {"color": "rgb(17,17,17)"}}}],"carpet": [{"type": "carpet","aaxis": {"gridcolor": "#506784","linecolor": "#506784","endlinecolor": "#A2B1C6","minorgridcolor": "#506784","startlinecolor": "#A2B1C6"},"baxis": {"gridcolor": "#506784","linecolor": "#506784","endlinecolor": "#A2B1C6","minorgridcolor": "#506784","startlinecolor": "#A2B1C6"}}],"mesh3d": [{"type": "mesh3d","colorbar": {"ticks": "","outlinewidth": 0}}],"contour": [{"type": "contour","colorbar": {"ticks": "","outlinewidth": 0},"autocolorscale": true}],"heatmap": [{"type": "heatmap","colorbar": {"ticks": "","outlinewidth": 0},"autocolorscale": true}],"scatter": [{"type": "scatter","marker": {"colorbar": {"ticks": "","outlinewidth": 0}}}],"surface": [{"type": "surface","colorbar": {"ticks": "","outlinewidth": 0}}],"heatmapgl": [{"type": "heatmapgl","colorbar": {"ticks": "","outlinewidth": 0}}],"histogram": [{"type": "histogram","marker": {"colorbar": {"ticks": "","outlinewidth": 0}}}],"parcoords": [{"line": {"colorbar": {"ticks": "","outlinewidth": 0}},"type": "parcoords"}],"scatter3d": [{"type": "scatter3d","marker": {"colorbar": {"ticks": "","outlinewidth": 0}}}],"scattergl": [{"type": "scattergl","marker": {"colorbar": {"ticks": "","outlinewidth": 0}}}],"choropleth": [{"type": "choropleth","colorbar": {"ticks": "","outlinewidth": 0}}],"scattergeo": [{"type": "scattergeo","marker": {"colorbar": {"ticks": "","outlinewidth": 0}}}],"histogram2d": [{"type": "histogram2d","colorbar": {"ticks": "","outlinewidth": 0},"autocolorscale": true}],"scatterpolar": [{"type": "scatterpolar","marker": {"colorbar": {"ticks": "","outlinewidth": 0}}}],"contourcarpet": [{"type": "contourcarpet","colorbar": {"ticks": "","outlinewidth": 0}}],"scattercarpet": [{"type": "scattercarpet","marker": {"colorbar": {"ticks": "","outlinewidth": 0}}}],"scattermapbox": [{"type": "scattermapbox","marker": {"colorbar": {"ticks": "","outlinewidth": 0}}}],"scatterpolargl": [{"type": "scatterpolargl","marker": {"colorbar": {"ticks": "","outlinewidth": 0}}}],"scatterternary": [{"type": "scatterternary","marker": {"colorbar": {"ticks": "","outlinewidth": 0}}}],"histogram2dcontour": [{"type": "histogram2dcontour","colorbar": {"ticks": "","outlinewidth": 0},"autocolorscale": true}]},"layout": {"geo": {"bgcolor": "rgb(17,17,17)","showland": true,"lakecolor": "rgb(17,17,17)","landcolor": "rgb(17,17,17)","showlakes": true,"subunitcolor": "#506784"},"font": {"color": "#f2f5fa"},"polar": {"bgcolor": "rgb(17,17,17)","radialaxis": {"ticks": "","gridcolor": "#506784","linecolor": "#506784"},"angularaxis": {"ticks": "","gridcolor": "#506784","linecolor": "#506784"}},"scene": {"xaxis": {"ticks": "","gridcolor": "#506784","gridwidth": 2,"linecolor": "#506784","zerolinecolor": "#C8D4E3","showbackground": true,"backgroundcolor": "rgb(17,17,17)"},"yaxis": {"ticks": "","gridcolor": "#506784","gridwidth": 2,"linecolor": "#506784","zerolinecolor": "#C8D4E3","showbackground": true,"backgroundcolor": "rgb(17,17,17)"},"zaxis": {"ticks": "","gridcolor": "#506784","gridwidth": 2,"linecolor": "#506784","zerolinecolor": "#C8D4E3","showbackground": true,"backgroundcolor": "rgb(17,17,17)"}},"title": {"x": 0.05},"xaxis": {"ticks": "","gridcolor": "#283442","linecolor": "#506784","automargin": true,"zerolinecolor": "#283442","zerolinewidth": 2},"yaxis": {"ticks": "","gridcolor": "#283442","linecolor": "#506784","automargin": true,"zerolinecolor": "#283442","zerolinewidth": 2},"ternary": {"aaxis": {"ticks": "","gridcolor": "#506784","linecolor": "#506784"},"baxis": {"ticks": "","gridcolor": "#506784","linecolor": "#506784"},"caxis": {"ticks": "","gridcolor": "#506784","linecolor": "#506784"},"bgcolor": "rgb(17,17,17)"},"colorway": ["#636efa","#EF553B","#00cc96","#ab63fa","#19d3f3","#e763fa","#fecb52","#ffa15a","#ff6692","#b6e880"],"hovermode": "closest","colorscale": {"diverging": [[0,"#8e0152"],[0.1,"#c51b7d"],[0.2,"#de77ae"],[0.3,"#f1b6da"],[0.4,"#fde0ef"],[0.5,"#f7f7f7"],[0.6,"#e6f5d0"],[0.7,"#b8e186"],[0.8,"#7fbc41"],[0.9,"#4d9221"],[1,"#276419"]],"sequential": [[0,"#0508b8"],[0.0893854748603352,"#1910d8"],[0.1787709497206704,"#3c19f0"],[0.2681564245810056,"#6b1cfb"],[0.3575418994413408,"#981cfd"],[0.44692737430167595,"#bf1cfd"],[0.5363128491620112,"#dd2bfd"],[0.6256983240223464,"#f246fe"],[0.7150837988826816,"#fc67fd"],[0.8044692737430168,"#fe88fc"],[0.8938547486033519,"#fea5fd"],[0.9832402234636871,"#febefe"],[1,"#fec3fe"]],"sequentialminus": [[0,"#0508b8"],[0.0893854748603352,"#1910d8"],[0.1787709497206704,"#3c19f0"],[0.2681564245810056,"#6b1cfb"],[0.3575418994413408,"#981cfd"],[0.44692737430167595,"#bf1cfd"],[0.5363128491620112,"#dd2bfd"],[0.6256983240223464,"#f246fe"],[0.7150837988826816,"#fc67fd"],[0.8044692737430168,"#fe88fc"],[0.8938547486033519,"#fea5fd"],[0.9832402234636871,"#febefe"],[1,"#fec3fe"]]},"plot_bgcolor": "rgb(17,17,17)","paper_bgcolor": "rgb(17,17,17)","shapedefaults": {"line": {"width": 0},"opacity": 0.4,"fillcolor": "#f2f5fa"},"sliderdefaults": {"bgcolor": "#C8D4E3","tickwidth": 0,"bordercolor": "rgb(17,17,17)","borderwidth": 1},"annotationdefaults": {"arrowhead": 0,"arrowcolor": "#f2f5fa","arrowwidth": 1},"updatemenudefaults": {"bgcolor": "#506784","borderwidth": 0}},"themeRef": "PLOTLY_DARK"}
}

AnyChart 基础Tools 配置

Anychart提供了 Chart的放大缩小，下载图片等功能，这个是可以在configuration options配置整体。一般大家配置一套完整的可以整体Copy应用。
完整的配置学习请访问：plotly-configuration.
AnyChart 基础Tools 展示示例：

示例configuration options配置：

{"displayModeBar": "hover","modeBarButtonsToRemove": ["select2d","zoom2d","pan2d","zoom2d","lasso2d","sendDataToCloud","hoverCompareCartesian","hoverClosestCartesian"],"displaylogo": false
}

Mapbox 地图在Anychart中使用

data部分配置

[{"type": "densitymapbox","locationmode": "usa-State"}
]

layout 部分配置使用mapbox，在style部分：
内建的 plotly.js 的mapbox 的style属性配置参数包括: open-street-map, white-bg, carto-positron, carto-darkmatter, stamen-terrain, stamen-toner, stamen-watercolor。内建的Mapbox本身自带的style属性参数配置包括: basic, streets, outdoors, light, dark, satellite, satellite-streets。
具体可以参考 https://plotly.com/javascript/reference/layout/mapbox/#layout-mapbox

// layout 部分配置使用mapbox
{"mapbox": {"style": "open-street-map","zoom": 4.884981426895676,"pitch": 0,"center": {"lat": 30,"lon": 120},"bearing": 0},"margin": {"r": 0,"t": 0,"b": 0,"l": 0,"pad": 0},"showlegend": false,"xaxis": {"range": [-1,6],"autorange": true},"yaxis": {"range": [-1,4],"autorange": true},"autosize": true}

最关键的是需要配置Configuration中的mapboxAccessToken。

{"mapboxAccessToken": "pk.eyJ1IjoiY2hyaWRkeXAiLCJhIjoiY2lxMnVvdm5iMDA4dnhsbTQ5aHJzcGs0MyJ9.X9o_rzNLNesDxdra4neC_A"
}