Question

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

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

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

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

Answer 1

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

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

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

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

Answer 2

有一种方法可以在不使用渲染器的情况下执行此操作，但这非常糟糕。

基本前提是您可以通过操纵SVG或VML属性在渲染时间后调整Highcharts中线条的粗细，并且可以防止Highcharts将其更改回来。因此，您需要做的就是将系列分成两个点系列并一次性绘制所有系列。下面的代码，小提琴可以在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()})


    })

具有可变线宽的Highcharts散点图

2 个答案: