AnyChart 开发 进阶篇

最新推荐文章于 2024-04-27 09:55:53 发布
最新推荐文章于 2024-04-27 09:55:53 发布
阅读量817 收藏 2
点赞数
分类专栏： Mendix 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38162116/article/details/117961573
版权

AnyChart 开发 进阶篇

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"
}
可爱的刘三岁
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AnyChart交互式数据可视化领域的全球领导者
RoffeyYang的博客
11-19 514
AnyChart成立于2003年，在交互式数据可视化领域是全球的领导者。我们的解决方案已经帮助数以千计的客户增加收入，降低运营成本，更好地为客户服务。正确的数据可视化有助于将运营数据转化为可操作的信息。商业用户非常地信任与依赖AnyChart的解决方案。行业引领人，如Oracle、3M公司、Lockheed Martin公司和其他公司都在使用我们的产品。我们的软件可以帮助各机构组织更加深入地了解其业务、改善决策和提高企业性能。 慧都17周年庆，各种折扣豪礼不断！ AnyChart|试用下载 AnyChar.
anyChart的api文档
01-27
很实用的anychart图表api，免费的 很实用的anychart图表api，免费的 很实用的anychart图表api，免费的 很实用的anychart图表api，免费的
如何使用Mendix组件Any Chart
西门子低代码Mendix的博客
06-24 831
如果您想建立一个3D图表或动态系列，Any chart会是您的朋友。
推荐项目：AnyChart - 强大的数据可视化解决方案
最新发布
gitblog_00078的博客
04-27 267
推荐项目：AnyChart - 强大的数据可视化解决方案 项目地址:https://gitcode.com/AnyChart/AnyChart 任何图表(AnyChart)是一个基于JavaScript的交互式图表库，旨在帮助开发者创建出令人印象深刻的、可高度自定义的数据可视化应用。无论您是Web开发新手还是经验丰富的专业人士，AnyChart都能为您提供简单易用且功能强大的工具。 技术分析 An...
anychart
az44yao的专栏
04-24 541
http://baike.baidu.com/link?url=xuFfIvNT0dQYs2o7HBd_OPYNxFtepnnrkDB_PhFBX56mbs_L2ywJg0PBBqhmDtsXwk59kJwpOl79NgE5UtoDda
跨浏览器、跨平台图表控件AnyChart 发布v8.0.0，新增模块化系统、3D线图
weixin_34365417的博客
10-11 146
2019独角兽企业重金招聘Python工程师标准>>> ...
Anychart图表系列三之常用图介绍
上善若水任方圆
06-27 665
今天给大家带来的是Anychart各种图的介绍，主要是教大家如何配出自己需要的图形出来。   柱状图（Column Chart） 柱状图是项目中最常用的图形之一，他的指标在X轴方向，每个指标对应的值在Y轴，Anychart的柱状图支持2D和3D效果。【官方参考文档】 如下代码片段，是一个简单的柱状图的XML配置，要生成一个柱状图，你就必须配置<chart>的plot_t...
AnyChart控件
04-07 828
AnyChart使你可以创建出绚丽的交互式的Flash图表和仪表控件。是一款灵活的基于Adobe Flash和跨浏览器和跨平台的图表解决方案，被很多知名大公司所使用，可以用于仪表盘的创建、报表、数据分析、统计学，金融等领域。该控件被国际上许多知名大公司所使用,如：Oracle, Lockheed Martin, Halliburton, NXP Semiconductors, 3M 和Role
AnyChart结合javaWEB开发的例子
08-18
本教程将通过一个具体的“AnyChart结合javaWEB开发的例子”来详细介绍如何使用AnyChart实现这一功能。 首先，我们需要理解AnyChart的基本概念。AnyChart是一个基于HTML5的图表库，支持多种图表类型，如折线图、柱状...
anychart7.11.zip
12-15
anychart是一款可以构建各类图标的工具，具有跨平台的特点，可以与html实现无缝连接，画出属于你心仪的靓图
AnyChart.zip
07-01
VS2010，ASP.NET4.0。首页index.aspx。 本示例含anychart常见经典案例。 anychart, anystock, anymap, anygantt
anychart指南
09-25
anychart指南 可以很好的知道开发
AnyChart图形配置说明
12-21
AnyChart图形配置说明。AnyChart FLash Chart是一款基于Flash/JavaScript的图表控件。使用Anychart可创建跨浏览器和跨平台的交互式图表和仪表。Anychart图表可以用于仪表盘的创建、报表、数据分析、统计学，金融等领域。
AnyChart-7.10.1破解版
06-21
anychart破解版，无水印，版本7.10.1
最新破解版AnyChart 6.2.0
05-08
2014年5月5号从管网下载的AnyChart 6.2.0,发现有水印，百度很多，没找到有最新的破解版，因此自己动手，花了半天的时间，终于将AnyChart的swf给破解了，去掉了水印。 破解的东西很单一，破解的研究过程很漫长，有需要知道破解方法，包括破解其他SWF的
anyChart破解版，外加demo亲测
08-15
破解版的anyChart ，主要难点在于去除水印。 说实话，真不容易。弄好了，就给大家共享一下吧，当前官网上的demo应该都支持，当前时间2014.8.15，内含我用过的四个demo。 使用时请阅读使用说明！
Anychart图表系列一：入门介绍
上善若水任方圆
06-24 684
在项目中使用Anychart图表已经有8个月有余，对Anychart整体也有了一定的了解，产品升级的空闲期，分享一点Anychart图表的使用经验。   前言 Anychart是一款基于Flash/HTML5（最新的6.0x版本开始支持HTML5）进行图形渲染的图表组件，图数据采用了XML格式进行解析，主要提供Javascript方法调用的形式来将图形渲染到web页面。 这是一款商...
Mendix开发不卡壳之 AnyChart 复合图表+定时器的使用
活着，还是怒放
04-23 918
Mendix+AnyChart+Timer
图表控件AnyChart教程：使用 JavaScript 构建马赛克图
RoffeyYang的博客
06-08 326
AnyChart是基于JavaScript (HTML5) 的图表控件。使用AnyChart控件，可创建跨浏览器和跨平台的交互式图表和仪表。AnyChart 图表目前已被很多知名大公司所使用，可用于仪表盘、报表、数据分析、统计学、金融等领域。 AnyChar HTML5图表高度可定制且高度兼容。拥有纯JavaScript API，AnyChart图表内置客户端数据实时更新，多层次向下钻区和具体参数更新。强大的主题引擎使你通过一系列图表进行独特的演示体验，而PDF和图像输出能产出图书质量打印文档。 点击下载A
AnyChart远程调用
06-02
AnyChart 可以使用 JavaScript 进行远程调用。具体来说，可以使用 AJAX 或 WebSocket 技术与服务器进行通信，并从服务器获取数据。然后，将数据传递给 AnyChart 进行渲染。 例如，可以使用 jQuery 的 AJAX 函数来...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值