AnyChart javascript图表控件使用教程

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

这篇文章主要针对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>

功能分类