Highcharts是一个功能强大且易于使用的JavaScript图表库，本文记录下创建，使用标题，副标题等功能；
首先，我们需要在HTML页面中引入Highcharts库和相关的样式和脚本文件。请将以下代码添加到页面的头部：
HTML代码：

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div class="divtable" style="opacity: 1; z-index: 0; display: inline; width: 50%"><div class="row"><div class="div-col-1" id="highcharts"></div></div>
</div>

在这里，我们创建了一个带有class "divtable"的div元素来包含我们的图表，并给它一个50%的宽度。然后，我们在其中创建一个带有id "highcharts"的div元素，这是我们将在其上绘制图表的地方。

接着是CSS样式代码，以下代码添加到页面的头部或样式文件中，这些样式将确保我们的图表在页面上居中显示，并具有适当的尺寸和布局。：

<style type="text/css">
.divtable {display: table;border-collapse: separate;min-width: 90%;margin-left: auto;margin-right: auto;text-align: center;
}.row .row div {display: table-cell;
}.divtable .row .div-col-1 {width: 60%;min-width: 550px;float: left;
}
</style>

接下来是JavaScript代码部分：

var memoryChartData;
//定义了一个函数来初始化图表选项：
function initOptions(chartData) {// 在这里初始化Highcharts的选项，例如设置图表的类型、标题等。
}

定义了一个函数来重新加载图表数据：

function reloadChartData() {if (memoryChartData || memoryChartData == null) {return;}loadChart("highcharts", memoryChartData);
}

在这个函数中，我们首先检查 memoryChartData 变量是否存在数据，如果存在则直接调用 loadChart 函数加载图表。否则，我们通过Ajax从服务器加载数据，并在成功回调函数中调用 loadChart 函数。具体的加载数据代码如下：

function loadHighCharts() {$.ajax({type: "POST",url: sys.rootPath + '/chart/test-data.html',dataType: "json",crossDomain: true,contentType: "application/json",success: function(data) {var onlyLineMarker = {marker: {radius: 0,lineWidth: 0,states: {hover: {enabled: true}}}};// 在这里处理从服务器返回的数据，并将其存储在memoryChartData变量中。memoryChartData = data; // 假设服务器返回的数据直接存储在memoryChartData中。reloadChartData(); // 重新加载图表数据。},error: function(jqXHR, textStatus, errorThrown) {// 处理请求失败的情况。console.log("Error: " + textStatus + " - " + errorThrown);}});
}

定义了 loadChart 函数来实际绘制图表：

function loadChart (id, data) {var chartsOptions= initOptions(data);var dataOptions = {title: {text: data.title},subtitle: {text: data.subTitle},yAxis: {title: {text: '金额'}},xAxis: {categories: data.xCategories},legend: {layout:'vertical',align: 'right',verticalAlign:'middle'},series: data.seriesMap};Highcharts.chart(id, $.extend(chartsOptions, dataOption));}
}
$(function() {loadHighCharts();
});

在这个函数中，我们首先使用 initOptions 函数初始化图表选项，然后创建一个名为 dataOptions 的对象来定义我们的图表数据。这个对象包括图表的标题、副标题、y轴标签、x轴类别和数据系列。最后，使用Highcharts的 chart 方法来绘制图表，并将 chartsOptions 和 dataOptions 对象作为参数传递给它。具体代码如下： 需要注意的是，这部分代码需要在成功获取到数据后才能执行，因此需要将其放在Ajax请求的成功回调函数中。