SaveText.Ru

14-2D-Pie-Chart-Outside-Labels
  1. <!doctype html>
  2.     <style>
  3.         #container {
  4.             border: 1px solid;
  5.             width: 800px;
  6.             height: 600px;
  7.         }
  8.     </style>
  9.     <!--Non Compiled JS-->
  10.     <script src="https://cdn.anychart.com/js/latest/anychart-bundle.min.js"></script>
  11.     <script src="../src/migrationTool.js"></script>
  12.     <script>
  13.         anychart.onDocumentReady(function() {
  14.             var v6conf =
  15.                     '<anychart>' +
  16.                     '    <settings>' +
  17.                     '        <animation enabled="True"/>' +
  18.                     '    </settings>' +
  19.                     '    <charts>' +
  20.                     '        <chart plot_type="Pie">' +
  21.                     '            <data_plot_settings enable_3d_mode="false">' +
  22.                     '                <pie_series>' +
  23.                     '                    <tooltip_settings enabled="true">' +
  24.                     '                        <format><![CDATA[{%name}' +
  25.                    'Sales: ${%value}' +
  26.                    'Percent: {%YPercentOfSeries}{numDecimals: 2}%]]></format>' +
  27.                     '                        <background>' +
  28.                     '                            <corners type="Rounded" all="3"/>' +
  29.                     '                        </background>' +
  30.                     '                    </tooltip_settings>' +
  31.                     '                    <label_settings enabled="true" mode="Outside" multi_line_align="Center">' +
  32.                     '                        <background enabled="false"/>' +
  33.                     '                        <position anchor="Center" valign="Center" halign="Center" padding="20"/>' +
  34.                     '                        <format><![CDATA[{%name}' +
  35.                    '${%value} ({%YPercentOfSeries}{numDecimals:1}%)]]></format>' +
  36.                     '                        <font bold="False"/>' +
  37.                     '                        <states>' +
  38.                     '                            <hover>' +
  39.                     '                                <font underline="true"/>' +
  40.                     '                            </hover>' +
  41.                     '                        </states>' +
  42.                     '                    </label_settings>' +
  43.                     '                    <connector color="Black" opacity="0.4"/>' +
  44.                     '                </pie_series>' +
  45.                     '            </data_plot_settings>' +
  46.                     '            <data>' +
  47.                     '                <series name="Series 1">' +
  48.                     '                    <point name="Product A" y="1222"/>' +
  49.                     //'                    <point name="Product B" y="2431"/>' +
  50.                     //'                    <point name="Product C" y="3624"/>' +
  51.                     //'                    <point name="Product D" y="5243"/>' +
  52.                     //'                    <point name="Product E" y="8813"/>' +
  53.                     '                </series>' +
  54.                     '            </data>' +
  55.                     '            <chart_settings>' +
  56.                     '                <title enabled="true" padding="15">' +
  57.                     '                    <text>2D Pie Chart: Outside Labels with connectors</text>' +
  58.                     '                </title>' +
  59.                     '            </chart_settings>' +
  60.                     '        </chart>' +
  61.                     '    </charts>' +
  62.             '</anychart>';
  63.             var v7conf = anychart.migrationTool.transformXml(v6conf, 'single');
  64.             console.log(v7conf);
  65.             var chart = anychart.fromJson(v7conf);
  66.             chart.startAngle(90);
  67.             chart.container('container');
  68.             chart.draw();
  69.         });
  70.     </script>
  71. </head>
  72. <div id="container"></div>
  73. </body>
  74. </html>

Share with your friends:

Распечатать