chart.js：チャートの

最新のcharts.jsバージョン2のチャート（ドーナツ）にチャートを実装したいと思います。example for charts.js Version 1しか見つかりませんでした。誰かがすでにバージョン2のオンラインの例を持っていますか？chart.js：チャートの

出典

2017-02-06 Nickname

charts.jsでは非常に複雑なことに思えました。私はecharts 3フレームワークに切り替えました。 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>

がに必要なJSを作成するOnline Builderを使用する - echarts.bar.pie.legend.tooltip.ie8.uglify.minと、おそらく追加機能のために - echarts。 pie.legend.tooltip.min

出典

2017-03-08 15:47:52 Nickname

答えて

関連する問題