官网：https://www.hcharts.cn/docs/line-chart

这是官方的静态写法。下面我简单介绍下php把 categorie和series循环为动态数据 往下看

var chart = new Highcharts.Chart('container', {
xAxis: {
    categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
},

series: [{
    name: '东京',
    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]
}, {
    name: '纽约',
    data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}

});

作为一名php，我用的是数据渲染。简单讲下用法

    0）首先写一个div展示趋势图，宽高视情况而定。
        <div id="container" style="min-width:700px;height:400px"></div>

    1）然后引入js
    <script type="text/javascript" src="路径/highcharts.js"></script>

 2)将控制器返回的数据接收到，
     $(function () 
     {
     // 1接收php返回的json数据 2 name是折线图左边展示的名字  调用Getseries函数
        var q=<?php echo $data；?>
        var name ='XXXX趋势图';
        Getseries(q,name)
    }

3）此方法是循环得到的数据 最后调用GetD方法将拼接好的动态数据放进去

    function Getseries(q,name) {
    dataTmp = "";
    categor="[";
    $.each(q, function (i, field) 
    { 
        dataTmp += "{name: '" +  i+"',"+ "data:[";
        //视情况而定。如果返回的数据一循环即可搞定就不需要二次循环
        $.each(field,function(a,b)
        {
            dataTmp +=   + b['browse']  + ",";
            categor+="'"+b['time']+"',";
        });
        dataTmp+="]},";

    });
   categor+="]";
   GetD(dataTmp,categor,name);
};


4 ）绑定数据信息 之前写的div的id值为container

function GetD(dataw,categor,name) 
{
    //实例化 highcharts
    $('#container').highcharts(
    {
        title: {text: '趋势图'},//折线图名字
        xAxis: {categories:eval(categor)},//横坐标下面展示名称，categor是已经拼接好的。格式是['2','3','4']
        yAxis: {  
                //Y轴左边展示的名字
                title: {text: name},
                //隔行加背景色
                alternateGridColor: '#FDFFD5'},
        legend:{
              layout: 'vertical',
              align: 'right',
              verticalAlign: 'middle',
              borderWidth: 0
          },
        series:eval("[" + dataw + "]")   //获取数据源操作信息
    });
}

这里已经写的很详细了。如果有不是很清楚的可以回复我一起交流。