可变线宽的Highcharts散点图

我想画一个散点图，用线连接每个点。是否可以改变各段之间的线条宽度

例如，我希望从点A到点B的线的宽度为5。我希望点B和点C之间的线的宽度为2

当然，我可以使用手动绘制线，但是我必须手动处理坐标和缩放

---

（FWIW，这里有一个。）

没有配置选项来执行此操作。正如你所说的，困难的方法是在政府的帮助下自己实现它

可以使用颜色和大小配置各个点：

data: [{
    x: 161.2, 
    y: 51.6,
    marker: {
        radius: 15,
        fillColor: 'rgb(255, 0, 0)'
    }
}]

---

但是连接两个标记的线没有任何单独的设置。

有一种方法可以在不使用渲染器的情况下实现这一点，但是这是一个非常复杂的问题

基本前提是，可以在渲染后通过操纵SVG或VML属性来调整Highcharts中线条的粗细，并且可以防止Highcharts将其更改回原来的粗细。因此，你所需要做的就是把你的系列分成两点系列，并一次将它们全部绘制出来。下面的代码，可以在这里看到fiddle

$（文档）.ready（函数（）{
//定义数据点
数据=[
{x:2，y:4，厚度：1}，
{x:7，y:8，厚度：8}，
{x:10，y:10，厚度：2}，
{x:22，y:2，厚度：10}，
{x:11，y:20，厚度：15}，
{x:5，y:15，厚度：2}
]
//将数据格式化为两点序列
//并创建一个可以放置的对象
//直接进入“系列”选项
var金融系列=[]；
对于（变量i=0；i

        $(document).ready(function() {
        //Define the data points
        DATA = [
        {x: 2,y: 4,thickness: 1},
        {x: 7,y: 8,thickness: 8},
        {x: 10,y: 10,thickness: 2},
        {x: 22,y: 2,thickness: 10},
        {x: 11,y: 20,thickness: 15},
        {x: 5,y: 15,thickness: 2}
        ]

        //Format the data into two point series
        //and create an object that can be put 
        //directly into the "series" option
        var finalSeries = [];
        for (var i=0; i < DATA.length-1; i++) {
            finalSeries[i]={};
            finalSeries[i].data = [];
            finalSeries[i].data.push(DATA[i]);
            finalSeries[i].data.push(DATA[i+1])
        };

        //A function to change the thickness of
        //the lines to the proper size
        function changeLineThick(){
            var drawnSeries = $(".highcharts-series")
            for (var i=0; i < drawnSeries.length; i++) {
                drawnSeries.eq(i)
                .children("path")
                .eq(3) //this could change depending on your series styling
                .attr("stroke-width",DATA[i].thickness)
            };
        }

        //Define and render the HighChart
        chart = new Highcharts.Chart({
            chart: {
                renderTo: "chart-container",
                defaultSeriesType: "scatter"
            },
            plotOptions: {
                scatter: {
                    lineWidth: 2
                }
            },
            symbols: ["circle","circle","circle","circle","circle","circle"],
            series: finalSeries
        })

        changeLineThick();

        //prevent Highcharts from reverting the line
        //thincknesses by constantly setting them 
        //to the values you want
        $("#chart-container").mousemove(function(){changeLineThick()})


    })