AnyChart 开发 进阶篇
红猪
2021.06.22 13:10发布于技术 - 前端与UI
2560

AnyChart 开发 进阶篇

@[TOC](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的主题配置选择。

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

获得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"
}
Code_Dove、Andes_云龙、颂文Gavin、Simon
点赞
收藏
手机查看
举报
0个回复
倒序看帖
仅看楼主
楼层直达

暂无数据