彩票走势图

dhtmlxDiagram是一个图表库，只需几行代码就能生成任何你需要的图表。借助自动布局和实时图编辑器，以整齐的层次结构可视化复杂数据。JavaScript dhtmlxDiagram允许您向Web应用程序中添加漂亮的交互式图表，图表和图形。借助这种轻巧而快速的组件，您的数据将以清晰直观的方式表示。

点击下载dhtmlxDiagram试用版

DHTMLX Diagram已更新至版本3.1。我们已经将来自JavaScript图表组件的用户的大量反馈整合到了发行版中。现在，您可以创建和自定义思维导图，通过思维导图编辑器即时对其进行编辑，微调每个形状的工具栏，并将自定义事件处理程序添加到自定义形状。此外，可以使用内置的类型定义来帮助您更快地对图进行编码。

全新思维导图

版本3.1的主题演讲是引入了一种新的图表类型-心智图。思维导图用于可视化信息，具有从核心思想中分支出来的多个按层次排列的概念。此图类型可应用于构建业务，科学，技术和任何其他类型的数据。

要以正确的层次结构顺序排列形状，可以通过父级配置属性指定每个形状的父级ID，也可以使用连接器对象的配置属性将形状彼此链接。使用连接器对象的from和to属性，您可以定义与特定连接器链接的形状。此外，您可以借助可选的type属性选择连接器是虚线还是实线：

const data = [
       // shapes
    { id: "1", text: "49 emotions" },
    { id: "2", text: "Positive and lively" },
    { id: "3", text: "Quiet positive" },
    { id: "4", text: "Caring" },
    { id: "5", text: "Reactive" },
    // connectors
    { "id": "1-2", "from": "1", "to": "2", "type": "dash" },
    { "id": "1-3", "from": "1", "to": "3", "type": "dash" },
    { "id": "1-4", "from": "1", "to": "4", "type": "line" },
    { "id": "1-5", "from": "1", "to": "5", "type": "line" },
];

const diagram = new dhx.Diagram(document.body, { 
    type: "mindmap", 
    defaultLinkType: "line"        
});

const diagram = new dhx.Diagram(document.body, { 
    type: "mindmap",
    typeConfig: {
        direction: "right",
    }
});
diagram.data.parse(data);

const diagram = new dhx.Diagram(document.body, { 
    type: "mindmap",
    typeConfig: {
        side: {
            left: ["2", "3"],
            right: ["4", "5"],
        }
    }
});
diagram.data.parse(data);

配置思维导图时，您还可以决定要显示和隐藏哪些子形状。在开放的属性显示孩子塑造一个特定父形状是的真实默认。借助openDir属性，您可以更精确地指定是在父形状的左侧还是右侧显示子形状：

const data = [
    {
        "id": "1", "text": "49 emotions",
        "openDir": {
            left: true,
            right: false,
        }
    },
    { "id": "2", "text": "Positive and lively", "parent": "1" },
    { "id": "3", "text": "Quiet positive", "parent": "1" },
    { "id": "4", "text": "Caring", "parent": "1" },
    { "id": "5", "text": "Reactive", "parent": "1" },
];

思维导图中的自定义形状

const data = [
    // create an "img-card" shape of Org Chart with the related configuration
    { id: "1", text: "Chairman & CEO", type: "img-card", img: "../avatar-06.jpg" },
    // create default "topic" shapes of Mind Map
    { id: "2", text: "Manager", parent: "1" },
    { id: "2.1", text: "Marketer", parent: "2" },
    { id: "2.2", text: "Team Lead ", parent: "2" },
    // more options
];
 
// initializing the mind map
const diagram = new dhx.Diagram(document.body, {
    type: "mindmap",
});
diagram.data.parse(data);

const diagram = new dhx.Diagram(document.body, {
    type: "mindmap",
    defaultShapeType: "rectangle" 
});
 
const data = [
    { id: "1", text: "Chairman & CEO", type: "card" },     
    { id: "2", text: "Manager", parent: "1" },
    { id: "3", text: "Technical Director", parent: "1" },
    { id: "4", text: "CCO", parent: "1" },
    { id: "5", text: "Product Manager", parent: "1" }
];

此外，您可以通过addShape（）方法添加自定义形状并将其设置为默认形状，从而创建一个完全自定义的思维导图。在下面的示例中，我们创建了一个带有目标网页预览的站点地图，而不是主题形状和形状中的自定义HTML内容：icon（打开一个弹出窗口），带有嵌入到目标网页的链接的图标以及自定义文本（当用户点击一个形状：

const diagram = new dhx.Diagram(document.body, {
    type: "mindmap",
    // specifies the new shape type as a type for all shapes
    defaultShapeType: "flowView"
});
 
function template({ title, view, cr, br, conversion, link }){
    ...
}

function openModalInfo(title, text) {
     ...
}
 
diagram.addShape("flowView", {
    template: template,
    eventHandlers: {
        onclick: {
            info: function(event, item) {
                openModalInfo(item.title, item.info);
            }
        }
    }
});

const customShape = [
    // an appropriate data set
];

	diagram.data.parse(customShape); 

在DHTMLX模板集合中，可以将此自定义思维导图用作CSS模板。

思维导图编辑器

伴随引入全新的图表类型，DHTMLX图表获得了一个专门用于处理思维导图的新编辑器。在心灵地图编辑器提供了所有的图中可用的可能性和组织结构图编辑器。它有两个面板：一个在编辑区域的顶部，另一个在编辑区域的右侧。

为了创建思维导图编辑器，您需要在编辑器配置对象中指定编辑器类型：

var editor = new dhx.DiagramEditor(document.body, { 
    type: "mindmap" 
});

广泛的API属性使您可以配置编辑器以满足您的需求。您可以操纵编辑器控件，此外，还可以自定义右侧面板以为其配备必要的编辑选项。当您要编辑自定义思维导图时（如下面的示例），它可能特别有用。

编辑器中的自定义形状工具栏

从v3.1开始，您可以在所有DHTMLX图表编辑器中自定义每个形状的工具栏。

对于思维导图编辑器，默认工具栏由四个控件组成，这些控件用于添加新的子形状，在根形状的右侧和根形状的左侧创建新形状，以及删除形状。

为了使自定义成为可能，我们添加了shapeToolbar配置属性，该属性允许操作工具栏控件并创建自定义控件。如果将此属性指定为true，则工具栏将包含所有特定于您使用的编辑器的默认控件。要修改工具栏，您可以通过shapeToolbar属性仅包含所需的那些控件。指定控件的顺序决定了它们在工具栏中的显示方式。

const editor = new dhx.DiagramEditor(document.body, {
    type: "mindmap",
    shapeToolbar: ["remove", "add"]
});

const editor = new dhx.DiagramEditor(document.body, {
    type: "mindmap",
    shapeToolbar: [       
 true,
{ id: "download", content:"<i class='dxi dxi-download'></i>" }    
    ] 
});

因此，v3.1使您能够完全控制所有编辑器（图表，组织结构图和思维导图）中每个形状的工具栏的配置，并使您能够广泛地自定义编辑器。

自定义事件处理程序

从现在开始，DHTMLX Diagram由于能够添加自定义事件处理程序，因此能够处理具有自定义形状的用户交互。为此，我们引入了addShape（）方法的新eventHandlers属性。

在下面的示例中，我们添加了一个事件处理程序，以侦听带有info类的图标的点击，之后将打开一个模式窗口：

diagram.addShape("template", {
    template: template,
    defaults: {
        height: 190,
        width: 97
    },
    eventHandlers: { 
        onclick: { 
            info: function(event, item) { 
                openModalInfo(item.title, item.info); 
            } 
        } 
    }
});

TypeScript支持

锦上添花的是DHTMLX Diagram库从v3.1开始提供的TypeScript支持。从现在开始，您可以依靠内置的类型定义，并应用类型建议，类型检查和自动补全功能，以加快编码速度并使代码整洁而稳定。检查样品>

其他功能和更新

该版本带来了编辑器对象的新事件：BeforeShapeIconClick和AfterShapeIconClick，BeforeShapeMove和AfterShapeMove。它们用于跟踪用户操作，例如单击每个形状的工具栏控件和移动形状。

当通过导出服务导出图表时，V3.1还提供了控制图表CSS样式的功能。从现在开始，您可以禁用CSS样式的导出，或者仅包括将它们与图表一起导出所需的样式。

如果您对该图表控件感兴趣，可以在慧都网免费下载最新试用版，加入图表控件QQ交流群：740060302

APS帮助提升企业生产效率，真正实现生产计划可视化呈现与控制,快速有效响应不同场景的生产计划，提高准时交货能力，提高产能和资源利用率

想要购买dhtmlxDiagram正版授权，或了解慧都APS系统请点击