可以绘制带有下钻的流程图吗？

【问题标题】：Flowchart drawing with drilldown possible?可以绘制带有下钻的流程图吗？
【发布时间】：2018-10-02 15:11:24
【问题描述】：

使用绘制的流程图手动创建明细。当单击任一圆角正方形或正方形内的文本并将其向下钻取到第二个流程图时。希望向下钻取类似于常规图表，在同一个 div 容器中使用返回按钮到第一个图表。谢谢。

Highcharts.chart('container', {
  chart: {
    backgroundColor: 'white',
    events: {
        load: function () {
            //Draw the flow chart
            var ren = this.renderer,
                colors = Highcharts.getOptions().colors,
                rightArrow = ['M', 25, 0, 'L', 45, 0, 'L', 40, 10, 'M', 45, 0, 'L', 40, -10],
                leftArrow = ['M', 100, 0, 'L', 0, 0, 'L', 5, 5, 'M', 0, 0, 'L', 5, -5];

            // Separator, client from service
            ren.path(['M', 130, 100, 'L', 200, 300])
                .attr({
                    'stroke-width': 2,
                    stroke: 'silver',
                    dashstyle: 'dash'
                })
                .translate(35, 195)
                .add();

            ren.path(['M', 130, 100, 'L', 200, 300])
                .attr({
                    'stroke-width': 2,
                    stroke: 'silver',
                    dashstyle: 'dash'
                })
                .translate(15, 35)
                .add();                    

            // Headers
            ren.label('', 20, 40)
                .css({
                    fontWeight: 'bold'
                })
                .add();
            ren.label('', 220, 40)
                .css({
                    fontWeight: 'bold'
                })
                .add();
            ren.label('', 440, 40)
                .css({
                    fontWeight: 'bold'
                })
                .add();

            // Top labels
            ren.label('Dog<br/>Assessment', 10, 82)
                .attr({
                    fill: colors[2],
                    stroke: 'white',
                    'stroke-width': 2,
                    padding: 10,
                    r: 15,
                    height: 125,
                    width: 100
                })
                .css({
                    color: 'black'
                })
                .add()
                .shadow(true);

            ren.label('Cat<br/>Determination', 180, 82)
                .attr({
                    fill: '#8A2BE2',
                    stroke: 'white',
                    'stroke-width': 2,
                    padding: 10,
                    r: 15,
                    height: 125,
                    width: 100
                })
                .css({
                    color: 'black'
                })
                .add()
                .shadow(true);

            ren.label('Pig<br/>Development', 350, 82)
                .attr({
                    fill: colors[2],
                    stroke: 'white',
                    'stroke-width': 2,
                    padding: 10,
                    r: 15,
                    height: 125,
                    width: 100
                })
                .css({
                    color: 'black'
                })
                .add()
                .shadow(true);

            ren.label('Final<br/>Count', 520, 82)
                .attr({
                    fill: colors[6],
                    stroke: 'white',
                    'stroke-width': 2,
                    padding: 10,
                    r: 15,
                    height: 125,
                    width: 100
                })
                .css({
                    color: 'black'
                })
                .add()
                .shadow(true);

                // Arrow 1
            ren.path(rightArrow)
                .attr({
                    'stroke-width': 6,
                    stroke: '#E6E6FA'
                })
                .translate(125, 100)
                .add();

                // Arrow 2
            ren.path(rightArrow)
                .attr({
                    'stroke-width': 6,
                    stroke: '#E6E6FA'
                })
                .translate(295, 100)
                .add();

                // Arrow 3
            ren.path(rightArrow)
                .attr({
                    'stroke-width': 6,
                    stroke: '#E6E6FA'
                })
                .translate(465, 100)
                .add();

                // Arrow 4
            ren.path(rightArrow)
                .attr({
                    'stroke-width': 6,
                    stroke: '#E6E6FA'
                })
                .translate(635, 100)
                .add();


            // Bottom labels
            ren.label('<font size="1">611 cases</font><ul style="margin-left:-30px"><li>Hazard and Scoping meetings to characterize risk</li><li>Forest assessment (if needed)</li></ul>', 30, 140, "rect", 0, 0, true)
                .attr({
                    fill: colors[0],
                    stroke: 'white',
                    'stroke-width': 2,
                    padding: 10,
                    r: 15,
                    height: 135
                })
                .css({
                    color: 'white',
                    width: '100px',
                    fontSize: '8px'
                })
                .add()
                .shadow(true);

            ren.label('<font size="1">1209 cases</font><ul style="margin-left:-30px"><li>Dialogue w/ submitters</li><li>May require revising risk assessment</ul>', 200, 140, "rect", 0, 0, true)
                .attr({
                    fill: colors[0],
                    stroke: 'white',
                    'stroke-width': 2,
                    padding: 10,
                    r: 15,
                    height: 135
                })
                .css({
                    color: 'white',
                    width: '100px',
                    fontSize: '8px'
                })
                .add()
                .shadow(true);

            ren.label('<font size="1">499 cases</font><ul style="margin-left:-30px"><li>Regulatory Options and Decision Meetings</li></ul>', 370, 140, "rect", 0, 0, true)
                .attr({
                    fill: colors[0],
                    stroke: 'white',
                    'stroke-width': 2,
                    padding: 10,
                    r: 15,
                    height: 135
                })
                .css({
                    color: 'white',
                    width: '100px',
                    fontSize: '8px'
                })
                .add()
                .shadow(true);

            ren.label('<br/><ul style="margin-left:-30px"><li>"Not Likely to Present Risk" Determination</li><li>Insufficient info/May Present Risk/Exposure-bases/Presents Risk</li></ul>', 540, 140, "rect", 0, 0, true)
                .attr({
                    fill: colors[0],
                    stroke: 'white',
                    'stroke-width': 2,
                    padding: 10,
                    r: 15,
                    height: 135
                })
                .css({
                    color: 'white',
                    width: '100px',
                    fontSize: '8px'
                })
                .add()
                .shadow(true);

            ren.label('', 710, 140)
                .attr({
                    fill: colors[0],
                    stroke: 'white',
                    'stroke-width': 2,
                    padding: 10,
                    r: 15,
                    height: 135,
                    width: 100
                })
                .css({
                    color: 'white',
                    width: '120px',
                    fontSize: '8px'
                })
                .add()
                .shadow(true);

            ren.label('Awaiting<br/>Submitter<br/>Action', 240, 340)
                .attr({
                    fill: '#E6E6FA',
                    stroke: 'white',
                    'stroke-width': 2,
                    padding: 10,
                    r: 15,
                    height: 125,
                    width: 100
                })
                .css({
                    color: 'black'
                })
                .add()
                .shadow(true);

            ren.label('<font size="1">102 cases, including</font><ul style="margin-left:-30px"><li>Submitter conducts long-term testing (18)</li><li>Awaiting submitter signature on Order (311)</li></ul>', 260, 400, "rect", 0, 0, true)
                .attr({
                    fill: colors[0],
                    stroke: 'white',
                    'stroke-width': 2,
                    padding: 10,
                    r: 15,
                    height: 135
                })
                .css({
                    color: 'white',
                    width: '100px',
                    fontSize: '8px'
                })
                .add()
                .shadow(true);
                }
    }
},
title: {
    text: '',
    style: {
        color: 'black'
    }
  }

});

http://jsfiddle.net/ermacwins/u0w5n918/14/

【问题讨论】：

    标签： javascript highcharts flowchart drilldown


    【解决方案1】：

    在这种情况下，无法使用默认的 Highcharts drilldown 模块（需要更改 Highcharts 核心中的某些方法），但创建自定义向下钻取并不困难。 我创建了示例模式，如何实现想要的结果。请单击“狗评估”元素以查看其工作原理。

    function clearChart() {
    Highcharts.each(chart.initialElements, function(el) {
        el.destroy();
    });

    $('#back').show();
}

function drilldownDog() {
    var drilldownElements = chart.drilldownElements = [];

    drilldownElements.push(
        chart.renderer.label('Dog<br/>Assessment', 10, 82)
        .attr({
            fill: 'red',
            stroke: 'white',
            'stroke-width': 2,
            padding: 10,
            r: 15,
            height: 125,
            width: 100
        })
        .css({
            color: 'black'
        })
        .add()
        .shadow(true)
    );
}

function drawChart(chart) {
    var ren = chart.renderer,
        initialElements = chart.initialElements = [],
        colors = Highcharts.getOptions().colors,
        rightArrow = ['M', 25, 0, 'L', 45, 0, 'L', 40, 10, 'M', 45, 0, 'L', 40, -10],
        leftArrow = ['M', 100, 0, 'L', 0, 0, 'L', 5, 5, 'M', 0, 0, 'L', 5, -5];

    $('#back').hide();

    if (chart.drilldownElements && chart.drilldownElements.length) {
        Highcharts.each(chart.drilldownElements, function(el) {
            el.destroy();
        });
    }

    // Separator, client from service
    initialElements.push(ren.path(['M', 130, 100, 'L', 200, 300])
        .attr({
            'stroke-width': 2,
            stroke: 'silver',
            dashstyle: 'dash'
        })
        .translate(35, 195)
        .add());

    initialElements.push(ren.path(['M', 130, 100, 'L', 200, 300])
        .attr({
            'stroke-width': 2,
            stroke: 'silver',
            dashstyle: 'dash'
        })
        .translate(15, 35)
        .add());

    // Headers
    initialElements.push(ren.label('', 20, 40)
        .css({
            fontWeight: 'bold'
        })
        .add());
    initialElements.push(ren.label('', 220, 40)
        .css({
            fontWeight: 'bold'
        })
        .add());
    initialElements.push(ren.label('', 440, 40)
        .css({
            fontWeight: 'bold'
        })
        .add());

    // Top labels
    initialElements.push(ren.label('Dog<br/>Assessment', 10, 82)
        .attr({
            fill: colors[2],
            stroke: 'white',
            'stroke-width': 2,
            padding: 10,
            r: 15,
            height: 125,
            width: 100
        })
        .css({
            color: 'black'
        })
        .add()
        .on('click', function() {
            clearChart(chart);
            drilldownDog();
        })
        .shadow(true));

    initialElements.push(ren.label('Cat<br/>Determination', 180, 82)
        .attr({
            fill: '#8A2BE2',
            stroke: 'white',
            'stroke-width': 2,
            padding: 10,
            r: 15,
            height: 125,
            width: 100
        })
        .css({
            color: 'black'
        })
        .add()
        .shadow(true));

    initialElements.push(ren.label('Pig<br/>Development', 350, 82)
        .attr({
            fill: colors[2],
            stroke: 'white',
            'stroke-width': 2,
            padding: 10,
            r: 15,
            height: 125,
            width: 100
        })
        .css({
            color: 'black'
        })
        .add()
        .shadow(true));

    initialElements.push(ren.label('Final<br/>Count', 520, 82)
        .attr({
            fill: colors[6],
            stroke: 'white',
            'stroke-width': 2,
            padding: 10,
            r: 15,
            height: 125,
            width: 100
        })
        .css({
            color: 'black'
        })
        .add()
        .shadow(true));

    // Arrow 1
    initialElements.push(ren.path(rightArrow)
        .attr({
            'stroke-width': 6,
            stroke: '#E6E6FA'
        })
        .translate(125, 100)
        .add());

    // Arrow 2
    initialElements.push(ren.path(rightArrow)
        .attr({
            'stroke-width': 6,
            stroke: '#E6E6FA'
        })
        .translate(295, 100)
        .add());

    // Arrow 3
    initialElements.push(ren.path(rightArrow)
        .attr({
            'stroke-width': 6,
            stroke: '#E6E6FA'
        })
        .translate(465, 100)
        .add());

    // Arrow 4
    initialElements.push(ren.path(rightArrow)
        .attr({
            'stroke-width': 6,
            stroke: '#E6E6FA'
        })
        .translate(635, 100)
        .add());



    // Bottom labels
    initialElements.push(ren.label('<font size="1">611 cases</font><ul style="margin-left:-30px"><li>Hazard and Scoping meetings to characterize risk</li><li>Forest assessment (if needed)</li></ul>', 30, 140, "rect", 0, 0, true)
        .attr({
            fill: colors[0],
            stroke: 'white',
            'stroke-width': 2,
            padding: 10,
            r: 15,
            height: 135
        })
        .css({
            color: 'white',
            width: '100px',
            fontSize: '8px'
        })
        .add()
        .shadow(true));

    initialElements.push(ren.label('<font size="1">1209 cases</font><ul style="margin-left:-30px"><li>Dialogue w/ submitters</li><li>May require revising risk assessment</ul>', 200, 140, "rect", 0, 0, true)
        .attr({
            fill: colors[0],
            stroke: 'white',
            'stroke-width': 2,
            padding: 10,
            r: 15,
            height: 135
        })
        .css({
            color: 'white',
            width: '100px',
            fontSize: '8px'
        })
        .add()
        .shadow(true));

    initialElements.push(ren.label('<font size="1">499 cases</font><ul style="margin-left:-30px"><li>Regulatory Options and Decision Meetings</li></ul>', 370, 140, "rect", 0, 0, true)
        .attr({
            fill: colors[0],
            stroke: 'white',
            'stroke-width': 2,
            padding: 10,
            r: 15,
            height: 135
        })
        .css({
            color: 'white',
            width: '100px',
            fontSize: '8px'
        })
        .add()
        .shadow(true));

    initialElements.push(ren.label('<br/><ul style="margin-left:-30px"><li>"Not Likely to Present Risk" Determination</li><li>Insufficient info/May Present Risk/Exposure-bases/Presents Risk</li></ul>', 540, 140, "rect", 0, 0, true)
        .attr({
            fill: colors[0],
            stroke: 'white',
            'stroke-width': 2,
            padding: 10,
            r: 15,
            height: 135
        })
        .css({
            color: 'white',
            width: '100px',
            fontSize: '8px'
        })
        .add()
        .shadow(true));

    initialElements.push(ren.label('', 710, 140)
        .attr({
            fill: colors[0],
            stroke: 'white',
            'stroke-width': 2,
            padding: 10,
            r: 15,
            height: 135,
            width: 100
        })
        .css({
            color: 'white',
            width: '120px',
            fontSize: '8px'
        })
        .add()
        .shadow(true));

    initialElements.push(ren.label('Awaiting<br/>Submitter<br/>Action', 240, 340)
        .attr({
            fill: '#E6E6FA',
            stroke: 'white',
            'stroke-width': 2,
            padding: 10,
            r: 15,
            height: 125,
            width: 100
        })
        .css({
            color: 'black'
        })
        .add()
        .shadow(true));

    initialElements.push(ren.label('<font size="1">102 cases, including</font><ul style="margin-left:-30px"><li>Submitter conducts long-term testing (18)</li><li>Awaiting submitter signature on Order (311)</li></ul>', 260, 400, "rect", 0, 0, true)
        .attr({
            fill: colors[0],
            stroke: 'white',
            'stroke-width': 2,
            padding: 10,
            r: 15,
            height: 135
        })
        .css({
            color: 'white',
            width: '100px',
            fontSize: '8px'
        })
        .add()
        .shadow(true));
}

var chart = Highcharts.chart('container', {
    chart: {
        backgroundColor: 'white',
        events: {
            load: function() {
                drawChart(this);
            }
        }
    },
    title: {
        text: '',
        style: {
            color: 'black'
        }
    }
});

$('#back').on('click', function() {
    drawChart(chart);
});

    现场演示：http://jsfiddle.net/BlackLabel/95on37fa/

    【讨论】：

      猜你喜欢
      • 2021-10-14
      • 2018-05-31
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-06-08
      • 2011-04-27
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode