Диаграмма рассеяния Highcharts с переменной шириной линии

Question

Я хочу построить точечную диаграмму с линиями, соединяющими каждую точку. Можно ли изменить ширину линии между каждым сегментом?

Например, я хочу, чтобы линия от точки A до точки B имела ширину 5. Я хочу, чтобы линия между точкой B и точкой C имела ширину 2.

Конечно, я мог бы использовать рендерер , чтобы рисовать линии вручную, но тогда мне придется обрабатывать координаты и масштабировать вручную.

(FWIW, вот пример точечной диаграммы с соединительными линиями .)

Answer 1

Для этого нет возможности конфигурации. Трудным путем было бы, как вы говорите, реализовать это самостоятельно с помощью рендерера .

Вы можете настроить отдельные точки с цветом и размером:

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

но линия, соединяющая два маркера, не имеет индивидуальных настроек.

Answer 2

Есть способ сделать это без использования рендерера, однако это очень большой взлом.

Основная предпосылка заключается в том, что вы можете отрегулировать толщину линии в Highcharts по истечении времени рендеринга, манипулируя атрибутами SVG или VML, и вы можете предотвратить его возврат в 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()})


    })