AnyChart javascript图表控件使用教程

作者:控件中国网   出处:控件中国网   2015-07-23 16:34:47   阅读:13

这篇文章主要针对AnyChart JavaScript版本中如何设置图表的背景色、X轴和Y轴透明显示,以及控制X轴和Y轴刻度的显示,图标的表格线控制。如何是图表颜色渐变,如何设置图例等,这些都是图表控件中经常遇到的,具体可以参考下面的完整代码

<html>
<head>
  <script src="./js/AnyChart.dev.min.js"></script>
  <style>
    html, body, #container {
      width: 600px;
      height: 500px;
      margin: 50;
      padding: 50;
    }
  </style>
</head>
<body>
    <div id="container"></div>
    <script type="text/javascript">
        AnyChart.onDocumentReady(function () {
            // create data set on our data
            var dataSet = AnyChart.data.set([
    ['Traffic', 56, 0],
    ['Child Care', 44.8, 35],
    ['Transp.', 27.2, 61],
    ['Weather', 19.6, 77],
    ['Overslept', 11.4, 89],
    ['Emergency', 6.6, 100]
  ]);


            // map data for the first series, take x from the zero column and value from the first column of data set
            var seriesData_1 = dataSet.mapAs({ x: [0], value: [1] });

            // map data for the second series, take x from the zero column and value from the second column of data

set
            var seriesData_2 = dataSet.mapAs({ x: [0], value: [2] });

            // create column chart
            chart = AnyChart.column();

            // turn on chart animation
            chart.animation(false);
            
chart.yAxis().title().text('Revenue in US Dollars');
chart.yAxis().stroke({color:'BurlyWood',opacity: '1'});
chart.yAxis().ticks().enabled(false);
chart.yAxis().minorTicks().enabled(false);
chart.yScale().minorTicks(false);
chart.background().fill('BurlyWood');
chart.minorGrid(null, null);

chart.grid(0, null).grid(1, null);

//额外柱设置
chart.yAxis(1).stroke({color:'BurlyWood',opacity: '1'});
chart.yAxis(1).ticks().enabled(false);
chart.yAxis(1).minorTicks().enabled(false);
//x柱设置
chart.xAxis().stroke({color:'BurlyWood',opacity: '1'});
chart.xAxis().ticks().enabled(false);
chart.xAxis().minorTicks().enabled(false);

 

            // set container id for the chart
            chart.container('container');

            // set chart title text settings
            chart.title().text('Pareto Chart of Late Arrivals by Reported Cause');

            // create second series with mapped data
            chart.column(seriesData_1).fill(['0.1 red', '.3 yellow', '.6 white', '.9 orange']);
           
            // setup scale settings
            var yScale = chart.yScale();
            yScale.minimum(0);                    // set scale minimum value
            yScale.maximum(184.8);                // set scale maximum value
            yScale.ticks().interval(16.8);        // set scale ticks interval value
            yScale.minorTicks().interval(8.4);   // set scale minor ticks interval value

            // create additional scale for line series and extraYAxis
            // it force line series to not stuck with over series
            var additionalYScale = AnyChart.scales.linear();
            additionalYScale.minimum(0);
            additionalYScale.maximum(110);
            additionalYScale.ticks().interval(10);

            // create line series and set scale for it
            var lineSeries = chart.line(seriesData_2);
//设置渐变
lineSeries.stroke({
 keys: ['.1 red', '.5 blue', '.9 green'],
    thickness: 2
  });
            lineSeries.yScale(additionalYScale);

            // create extra axis on the right side of chart
            var extraYAxis = chart.yAxis(1);
            extraYAxis.orientation('right');
            extraYAxis.scale(additionalYScale);

            // setup axis to append '%' symbol to label values
            extraYAxis.labels().textFormatter(function (info) {
                return info.value + '%';
            });
//设置图例,这里是对图例进行了自定义处理
var palette = AnyChart.palettes.distinctColors().colors();
chart.legend().enabled(true);
chart.legend().position("top");
chart.legend().items([
       
{index: 0, text: "对公存款", iconType: "square",iconFill:['0.1 red', '.3 yellow', '.6 white', '.9 orange']},
       
{index: 1, text: "同比增长", iconType: "square",iconFill:['.1 red', '.5 blue', '.9 green']}         
]);

            // initiate chart drawing
            chart.draw();

        });
    </script>
</body>
</html>

Copyright© 2006-2015 ComponentCN.com all rights reserved.重庆磐岩科技有限公司(控件中国网) 版权所有 渝ICP备12000264号 法律顾问:元炳律师事务所
客服软件
live chat