首页 > 代码库 > highcharts曲线图

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

 

highcharts曲线图