Highcharts柱状图

最新推荐文章于 2024-10-02 05:39:15 发布

不看一

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量49

点赞数

文章标签： javascript 前端 json html 服务器

本文链接：https://blog.csdn.net/qq_35960620/article/details/130430862

版权

效果

<!--Highcharts javascript -->
<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>

<script>
$(function() {
    var chart = Highcharts.chart('container',{
        chart: {
            type: 'column'
        },
        title: {
            text: '渠道推广人数'
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: [
                '头条','其他'
            ],
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: '人数'
            }
        },
        tooltip: {
            // head + 每个 point + footer 拼接成完整的 table
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y}</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0,
                // dataLabels: {
                //     enabled: true
                // }
            }
        },
        series: [{
            name: '人数',
            data: [107, 48]
        }]
    });
});
</script>