• highcharts曲线图


    效果:

    隐藏 xy 轴说明

    .highcharts-legend {
        display:none
    }

    Json 数据:

    var days =[];
    var achievingrates=[]
    _.each(data, function (item)
    {
        days.push(item.day);
        achievingrates.push(item.achievingrate);                   
    });                
    chart1.xAxis[0].setCategories(days);
    chart1.series[0].setData(achievingrates);

    定义:

    chart1 = new Highcharts.Chart({
        chart: {
            type: 'spline',
            renderTo: 'container',
            backgroundColor: 'rgba(0,0,0,0)'--背景色
        },
        title: {
            text: '單日達成趨勢',
            x: -20, //center
            style: {
                fontSize:'25px',--字体大小颜色
                color: "#FFFF00",
                fill: '#FFFFFF'
            }
        },
        xAxis: {
            categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
            labels: {
                style:
                {
                    color: "#FFFF00",--横轴字体大小颜色
                    fontSize: "15px"
                }
            }
        },
        yAxis: {
            title: {
                text: ''
            },
            labels: {
                formatter: function () {
                    return this.value + ''
                },
                style:
                {
                    color: "#FFFF00",--y轴颜色大小
                    fontSize: "15px"
                }
            }
        },
        tooltip: {
            crosshairs: true,
            shared: true
        },
        colors: ['#FFFF00'],--线条颜色
        plotOptions: {
            spline: {
                marker: {
                    radius: 4,
                    lineColor: '#FFFF00',--线条颜色
                    lineWidth: 1
                }
            },
        },
        series: [{
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }]
    });
  • 相关阅读:
    以后努力,每天写博客!
    无题
    Fainting
    明天任务
    hdu 4022 Bombing(map)
    codeforces 1216E1 Numerical Sequence (easy version) (前缀和/二分)
    CodeForces 1176E Cover it!
    codeforces 1234D Distinct Characters Queries
    codeforces 1249C2 Good Numbers (hard version)
    codeforces 913B Christmas Spruce(树)
  • 原文地址:https://www.cnblogs.com/CoreXin/p/7079899.html
Copyright © 2020-2023  润新知