Chartjs-Chart.js: Chart in chart

by

0👍

✅

It seemed to be very complex thing in charts.js. I switched to echarts 3 framework.
https://ecomfe.github.io/echarts-doc/public/en/index.html

HTML:

<!doctype html>
<html>
<head>
<title>ECharts Sample</title>
    <meta name="robots" content="noindex" />
    <script src="/cc/echarts/js/echarts.bar.pie.legend.tooltip.ie8.uglify.min.js"></script>
</head>
<body>
    <div id="container" style="width: 100%;height:400px;"></div>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
app.title = 'test';

option = {
    color: ['#5b92d3','#c5def6', '#000099', '#2ab9da', '#bdbec0', '#b9c54a'],
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}"
    },
    legend: {
        orient: 'vertical',
        x: 'center',
        bottom: '0%',
        data:[/*'Europa: 54 %', 'Amerika: 20 %', 'Asien/\nPazifik: 17 %', 'Mittlerer Osten,\nAfrika & Sonstige: 9%',*/      'Medizintechnik: 65%', 'Sicherheitstechnik: 35%']
    },
    series: [
        {
            name:'Anteil nach Unternehmensbereichen',
            type:'pie',
            selectedMode: 'single',
            radius: ['20%', '30%'],
            label: {
                normal: {
                    show: false,
                    position: 'inner',
                    textStyle: {
                        color: 'rgba(84, 89, 92, 1)'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            itemStyle: {
                normal: {
                    shadowBlur: 0,
                    borderColor: '#fff',
                    borderWidth: 1,
                    borderType: 'solid'
                }
            },
            data:[
                {value:65, name:'Medizintechnik: 65%'/*, selected:true*/},
                {value:35, name:'Sicherheitstechnik: 35%'}
            ]
        },
        {
            name:'Umsatz im Geschaeftsjahr 2015: 2,6 Mrd. EUR',
            type:'pie',
            selectedMode: 'single',
            radius: ['45%', '55%'],
            label: {
                normal: {
                    textStyle: {
                        color: 'rgba(84, 89, 92, 1)'
                    }
                }
            },
            labelLine: {
                normal: {
                    lineStyle: {
                        color: 'rgba(84, 89, 92, 1)'
                    }
                }
            },
            itemStyle: {
                normal: {
                    shadowBlur: 0,
                    borderColor: '#fff',
                    borderWidth: 1,
                    borderType: 'solid'
                }
            },          
            data:[
                {value:54, name:'Europa: 54 %'},
                {value:20, name:'Amerika: 20 %'},
                {value:17, name:'Asien/\nPazifik: 17 %'},
                {value:9, name:'Mittlerer Osten,\nAfrika & Sonstige: 9%'}
            ]
        }
    ]
};

if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
</script>
    <script src="/js/awesomeiframe.min.js"></script>
</body>
</html>

Use the Online Builder to create the necessary JS with
– echarts.bar.pie.legend.tooltip.ie8.uglify.min and maybe for additional features
– echarts.pie.legend.tooltip.min

Leave a comment