Highcharts功能已经十分强大，但还是不够解决实际项目中遇到的所有问题，特别是当需要使用画布进行绘制的时候。所幸Highcharts作为图表库，其本质还是JavaScript所以在实际项目中，HTML、CSS和JavaScript同样适用于Highcharts。
另外对于Highcharts形成的图形有一点是需要强调的，Highcharts底层其实是二/三次贝塞尔曲线。贝塞尔曲线是应用于二维图形应用程序的数学曲线。 一般的矢量图形软件（包括Highcharts和ECharts）都是通过它来精确画出曲线，我们在绘图工具上看到的钢笔工也是如此。所以对于生成的曲线与曲线的交点要特别注意，除非是使用标准函数生成否则生成的其实是拟合曲线，可以作为参考但是对于十分精准的测量建议慎用。
感兴趣的可以了解一下 可缩放矢量图形。
前面在文章最后提到了不少的问题，现在我做下解释。
先上代码
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>demo2</title>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/data.js"></script>
<script type="text/javascript">
$(function () {
//图表构造函数Highcharts.Chart()，创建图表
var chart = Highcharts.chart('container', {
chart: {
type: 'scatter'
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
data:[]
}/*,function(chart) {
var pointIndex = 0, //点索引
//数据列上点坐标
point = chart.series[0].points[pointIndex],
x = point.plotX + chart.plotLeft,
y = point.plotY + chart.plotTop;
// x = point.plotX,
// y = point.plotY
//绘制路径
chart.renderer.path([
'M', //移动
chart.plotTop + chart.plotHeight,
'L', //划线
chart.plotLeft + chart.plotWidth,
.attr({ //属性
stroke: 'red', //行程颜色
'stroke-width': 1, //行程宽度
dashstyle: 'longdash' //样式
.add(); //添加
}*/);
var hasPlotLine = false,
$button = $('#button');
$('#button').click(function () {
var a = $('#XPoint').val();
var b = $('#YPoint').val();
var c = Number(a);
var d = Number(b);
if (!hasPlotLine) {
// 新增的点包含 x 和 y 值
chart.series[1].addPoint([c,d]);
/*chart.xAxis[0].addPlotLine({ //在x轴上增加
value:c, //在值为2的地方
width:2, //标示线的宽度为2px
color: '#000000', //标示线的颜色
id: 'plot-line-1', //标示线的id，在删除该标示线的时候需要该id标示
dashStyle:'longdashdot'
});*/
var pointIndex = 0;
// var group = this.renderer.g().add();
//数据列上点坐标
var point = chart.series[1].points[pointIndex],
x = point.plotX + chart.plotLeft,
y = point.plotY + chart.plotTop;
//绘制路径
lineRender = chart.renderer.path([
'M', //移动
chart.plotTop + chart.plotHeight,
'L', //划线
chart.plotLeft , //+ chart.plotWidth,
// 0,
.attr({ //属性
stroke: 'red', //行程
'stroke-width': 1, //行程宽度
id: 'plot-line-1',
dashstyle: 'longdashdot' //样式
.add(); //添加
$button.html('删除标示线');
} else {
// chart.xAxis[0].removePlotLine('plot-line-1');
// chart.renderer.path()
// chart.series[1].removePoint(x,y);
chart.series[1].data[0].remove();
// chart.renderer.lineRender.remove();
lineRender.destroy();
$button.html('新增标示线');
// .hide();
hasPlotLine = !hasPlotLine;
</script>
</head>
<div id="container"></div>
<input type="number" id="XPoint" name="LastName" size="28">
<input type="number" id="YPoint" name="LastName" size="28">
<button id="button" class="autocompare" onclick="GetText()" >新增点</button>
</body>
</html>
效果图如下：
之前提到的旋转“L”可以通过对绘图路径的x,y坐标进行测验得出结果，辅助线删除功能通过调用lineRender.destroy()方法进行销毁得出。
公司项目是暂时告一段落了，等有空我会把这段时间研究的相关项目代码放在GitHub上做学习参考。
Highcharts配置之前已经将Highcharts的大致操作都讲了一遍，现在我来介绍下Highcharts的参数配置。属性和事件以下主要参考[参数配置](https://www.runoob.com/highcharts/highcharts-setting-detail.html)chart.events.addSeries：添加数列到图表中。//// chart.events...
Highcharts的一些操作去掉打印按钮去掉右下角的网址信息隐藏图例
去掉打印按钮
Highcharts官网实例eg:https://jshare.com.cn/demos/NPVyQW
exporting:{
enabled:true //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示
去掉右下角的网址信息
Highcharts官网实例eg:https://j...
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="http://cdn.hcharts.cn/highch
一、exporting属性说明
默认情况下，HighCharts支持将图表导出为图片或打印功能的。也就是在图表的右上角有两个按钮。打击即可进行相应的操作。
实现导出和打印功能需要引入相应的js文件，也就是exporting.js（该文件存在于highCharts压缩包的/js/modules目录下）。
一般情况下，我们基本用不上该功能（不引入exporting.js即可去掉该功能），即使是使...
最近用highcharts做图表的时候想要调整打印导出功能按钮的位置，网上查了下，发现没有效果，然后去看文档，发现有差异，应该是版本更新后配置有所变化。最新配置如下，亲测有效。
var chart = Highcharts.chart('container', {
exporting: {
buttons: {
contextButton:{
symbol: 'url(http...
一.chart的部分相关属性说明
renderTo: 'container', //图表的页面显示容器(也就是要显示到的div)
defaultSeriesType: 'line', //图表类型(line、spline、scatter、splinearea、bar、pie、area、column)
marginRight: 50
在Vue和Echarts的项目实战中，首先要使用vue-cli3创建项目。可以通过运行命令"vue create 项目名称"来创建一个Vue项目。接下来，进入项目目录，使用命令"npm run serve"来运行项目。这样就可以在本地开发环境中开始项目实战了。
在数据可视化方面，Echarts是一个非常流行的图表库之一。除了Echarts外，还有其他一些流行的图表库，比如AntV、Highcharts和D3.js。这些图表库都是基于浏览器图形渲染技术实现的，主要有两种类型: Canvas和SVG。Canvas适合于大型渲染区域的应用程序，而SVG适合于图像密集型的应用。它们各自有不同的特点和适用场景，具体选择哪种图表库要根据项目需求和特点进行选择。
在具体的项目实战中，可以使用Echarts来创建各种图表和地图。Echarts提供了丰富的图表类型和交互功能，可以根据数据灵活地进行配置和展示。例如，可以使用Echarts来创建柱状图、折线图、饼图等各种类型的图表。同时，Echarts还支持对地图进行可视化展示，可以绘制各种地理信息和相关数据。使用Echarts可以通过配置项和数据来实现对图表和地图的定制化展示，使数据更加直观和易于理解。
在Vue和Echarts项目实战中，除了使用Echarts来创建图表和地图，还可以结合其他技术和工具来实现更多功能。例如，可以使用全局模态框来实现弹窗效果，使用Flex布局来实现页面的自适应布局，使用数字滚动来展示数据的动态变化，使用自定义小部件来实现一些炫酷的效果等等。此外，还可以利用rem和flexible.js进行智能大屏适配，使用cssrem插件来方便地使用rem单位进行样式开发等。
总之，在Vue和Echarts的项目实战中，可以根据具体需求和项目特点，结合Vue的开发框架和Echarts的数据可视化能力，实现丰富多样的图表和地图展示，同时还可以利用其他技术和工具来增强项目的功能和用户体验。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [echarts学习——（上）Vue+Echarts构建可视化大数据平台实战项目分享（附源码）](https://blog.csdn.net/weixin_43148111/article/details/123982183)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]
