AnyChart AnyChart 专为嵌入和集成而设计的 JavaScript 图表

                     anychart.onDocumentReady(function () {
    // create column chart
    var chart = anychart.column();

    var dataSet = anychart.data.set([
        ['Eyeshadows', 16252],
        ['Eyeliner', 8525],
        ['Eyebrow pencil', 14151],
        ['Nail polish', 10169],
        ['Lipstick', 15198],
        ['Lip gloss', 17489]
    ]);

    // set chart title
    chart.title('Top 6 Products by Revenue');

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

    // create first series with mapped data
    var series = chart.column(seriesData_one);
    series.name('Florida')
            .color('pink');

    // get shapes
    var shapes = series.rendering().shapes();

    // set rendering settings
    series.rendering()
            // set point function to drawing
            .point(drawer)
            // set update point function to drawing, change the point shape when the state changes
            .updatePoint(drawer)
            // set shapes
            .shapes(shapes);

    // set titles for Y-axis
    chart.yAxis().title('Revenue in Dollars');
    // set minimum for y-scale
    chart.yScale().minimum(0);
    // set tooltip prefix
    chart.tooltip().valuePrefix('$');
    // set container id for the chart
    chart.container('container');
    // initiate chart drawing
    chart.draw();
});

function drawer() {
    // if missing (not correct data), then skipping this point drawing
    if (this.missing) {
        return;
    }

    // get shapes group
    var shapes = this.shapes || this.getShapesGroup(this.pointState);
    // calculate the left value of the x-axis
    var leftX = this.x - this.pointWidth / 2;
    // calculate the right value of the x-axis
    var rightX = leftX + this.pointWidth;
    // calculate the half of point width
    var rx = this.pointWidth / 2;

    shapes.path
            // resets all 'path' operations
            .clear()
            // draw cone
            .moveTo(leftX, this.zero)
            .lineTo(leftX + rx, this.value)
            .lineTo(rightX, this.zero)
            // set fill settings, gradient
            .fill(['0 ' + anychart.color.darken(shapes.path.fill().color, 0.35),
                '0.40 ' + anychart.color.darken(shapes.path.fill().color, 0.35),
                '0.85 ' + anychart.color.lighten(shapes.path.fill().color, 0.35),
                '1 ' + anychart.color.lighten(shapes.path.fill().color, 0.35)])
            // set stroke settings
            .stroke('1.5 ' + anychart.color.darken(shapes.path.fill().color, 0.5))
            // close by connecting the last point with the first straight line
            .close();
}