Возможно ли рисование блок-схемы с детализацией?

Question

Вручную создайте детализацию, используя нарисованные блок-схемы.При щелчке по одному из закругленных квадратов или тексту в квадрате разверните его до 2-й блок-схемы.Надеемся, что развертка будет работать аналогично обычному графику с кнопкой возврата к 1-му графику в том же контейнере 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/

Answer 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/