HighCharts最新试用版
以下示例中的集成在本地计算机上完成，但完全相同的步骤适用于您的生产应用程序。
架构
为了让您了解全球架构，让我们来看看下面的图片：
全球架构很简单; 有三个主要组成部分：
-
TinyMCE插件
现在，您对主要组件有所了解; 让我们设置项目。
首先，让我们创建一个文件夹，我们将收集并运行该项目.
main.js
tinymce.init({
selector: "#chart-result",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste",
"highcharts highchartssvg noneditable"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
menubar: "file edit insert view format table tools help highcharts",
menu: {
highcharts: {
title: "Highcharts",
items: "highcharts"
})});
如果您使用的是TinyMCE版本4，请复制/粘贴此代码：
tinymce 。init （{ selector ：'＃chart-result' ， height ：550 ， plugins ：[ 'advlist autolink list links image charmap print preview anchor' ，'searchreplace visualblocks code fullscreen' ，'insertdatetime media table contextmenu paste' ，'highcharts highchartssvg noneditable ' ]， toolbar ：'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image' }）;
注意！
如果您以前使用过TinyMCE版本4，请注意版本5 API引入了一些更改，包括向工具栏添加新选项。我们需要为它创建一个单独的菜单选项，而不是将Highcharts插件集成到现有菜单中：
要访问不同的Highcharts图表的类型和选项，请添加以下库和模块：
-
highstock.js
-
highcharts-more.js
-
highcharts-3d.js
-
模块/ data.js
-
模块/ exporting.js
-
模块/ funnel.js
-
模块/固gauge.js
决赛将如下：index.html
<HTML> <link href = “highcharts-editor.min.css” rel = “stylesheet” type = “text / css” /> <script src = “http://code.highcharts.com/stock/highstock.js” type = “text / javascript” charset = “utf-8” > </ script> <script src = “https://code.highcharts.com/modules/data.js” type = “text / javascript” charset = “utf- 8“ > </ script> <script src = ”https：//code.highcharts.com/highcharts-more.js” 类型= “text / javascript” charset = “utf-8” > </ script> <script src = “https://code.highcharts.com/highcharts-3d.js” type = “text / javascript” charset = “utf- 8“ > </ script> <script src = ”https://code.highcharts.com/modules/exporting.js“ > </ script> <script src = ”https://code.highcharts.com/modules/ funnel.js“ > </ script> <script src = ”https://code.highcharts.com/modules/solid-gauge.js“ > </ script><script src = “highcharts-editor.min.js” > </ script> <script src = “https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.0.6/tinymce.min.js” > </ script> <script src = “highcharts-editor。 tinymce.js“ > </ script> <script src = ”main.js“ > </ script> <body> <textarea id = “chart-result” > </ textarea> </ body></ HTML>
这就对了; 所有组件都已设置完毕。现在，我所要做的就是使用Brackets中的实时预览选项来运行项目。
您还可以在CodeSandBox上尝试实时版本。单击Highcharts并将自己的交互式图表添加到TinyMCE ediot中：
想要购买Highcharts正版授权的朋友可以咨询官方客服。
标签：
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！