具有可变线宽的 Highcharts 散点图答案

【问题标题】：Highcharts scatter plot with variable line width具有可变线宽的 Highcharts 散点图
【发布时间】：2011-11-23 20:33:43
【问题描述】：

我想绘制一个用线连接每个点的散点图。是否可以改变每段之间的线宽？

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

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

（FWIW，这是example of a scatter plot with connecting lines。）

【问题讨论】：

标签： highcharts

【解决方案1】：

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

您可以为各个点配置颜色和大小：

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

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

【讨论】：

【解决方案2】：

有一种方法可以在不使用渲染器的情况下做到这一点，但它非常有技巧。

基本前提是你可以在渲染时间后通过操纵SVG或VML属性来调整Highcharts中线条的粗细，并且可以防止Highcharts改回来。因此，您需要做的就是将您的系列分成两个点系列并同时绘制它们。代码如下，fiddle可以看这里http://jsfiddle.net/39rL9/

        $(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()})


    })

【讨论】：