如何在高图表中创建自定义线型

How can I make a custom line type in high charts

本文关键字：创建 自定义 线型 高图表      更新时间：2023-09-26

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-allowpointselect-column/

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'spline'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        plotOptions: {
            series: {
                allowPointSelect: true
            }
        },
        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]
        }]
    });

    // the button action
    $('#button').click(function () {
        var chart = $('#container').highcharts(),
            selectedPoints = chart.getSelectedPoints();
        if (chart.lbl) {
            chart.lbl.destroy();
        }
        chart.lbl = chart.renderer.label('You selected ' + selectedPoints.length + ' points', 100, 60)
            .attr({
                padding: 10,
                r: 5,
                fill: Highcharts.getOptions().colors[1],
                zIndex: 5
            })
            .css({
                color: 'white'
            })
            .add();
    });
});

使用高图表，我可以将聊天类型设置为"样条"，从而创建雕刻线，但是我真的很想制作自己的线类型，该线类型直线大约 80%，然后在该点附近向上或向下弯曲。

任何帮助都非常感谢

也许你只是想使用step选项？请参阅 API。

如果不是（因为阈值可以在点之间的线的开始/中间/结尾），则换行getSegmentPath方法：http://jsfiddle.net/sqdLj33a/

(function (H) {
    H.wrap(H.seriesTypes.line.prototype, 'getSegmentPath', function (p, segment) {
        var s = this,
            segmentPath = [],
            level;
        if (s.options.customStep) {
            level = s.options.levelStep;
            // build the segment line
            H.each(segment, function (point, i) {
                var plotX = point.plotX,
                    plotY = point.plotY,
                    lastPoint;
                // moveTo or lineTo
                segmentPath.push(i ? 'L' : 'M');
                // step line 'center':
                if (i) {
                    lastPoint = segment[i - 1];
                    segmentPath.push(
                    plotX + (lastPoint.plotX - plotX) * level,
                    lastPoint.plotY, 
                    plotX + (lastPoint.plotX - plotX) * level,
                    plotY);
                }
                // normal line to next point
                segmentPath.push(point.plotX, point.plotY);
            });
        } else {
            segmentPath = p.call(s, segment);
        }
        return segmentPath;
    });
})(Highcharts);

和系列选项：

    series: [{
        customStep: true,
        levelStep: 0.2, // 80%
        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]
    }]

当然，如果你想要不同的路径，那么只需更改segmentPath数组。

相关文章：