chart.js：图表中的图表

Question

I would like to implement a chart in a chart (doughnut) in the latest charts.js Version 2. I only found an example for charts.js Version 1 . 我想在最新的Charts.js版本2中的图表（甜甜圈）中实现图表。我仅找到了Charts.js版本1的示例。 Does anyone have already an online example for version 2? 有没有人已经有第2版的在线示例？

Answer 1

It seemed to be very complex thing in charts.js. 在Charts.js中，这似乎是非常复杂的事情。 I switched to echarts 3 framework. 我切换到echarts 3框架。 https://ecomfe.github.io/echarts-doc/public/en/index.html https://ecomfe.github.io/echarts-doc/public/en/index.html

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 使用在线生成器通过-echarts.bar.pie.legend.tooltip.ie8.uglify.min和可能的其他功能-echarts.pie.legend.tooltip.min创建必要的JS。

chart.js：图表中的图表

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-03-08 15:47:52

chart.js：图表中的图表

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-03-08 15:47:52

解决方案1
0 已采纳 2017-03-08 15:47:52