Question

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％然后曲线向上或向下接近该点。

非常感谢任何帮助

Answer 1

也许您只想使用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数组。

如何在highcharts中创建自定义线型

1 个答案: