highcharts曲线图

Posted 2020-09-25 欣欣点灯

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]
    }]
});