1

我正在尝试构建一个带有沿两个 y 轴的渐变指示器的折线图。

这是一个示例，它为我带来了大约 90% 的路径：

$('#container').highcharts({
    // ...
    yAxis: [{
        title: {
            text: 'parts per million',
            style: {
                color: '#444'
            }
        },
        opposite: true,
        lineColor: {
            linearGradient: [0, 0, 0, 300],
            stops: [
                [0, 'rgb(255, 0, 0)'],
                [0.5, 'rgb(255, 255, 0)'],
                [1, 'rgb(0, 255, 0)'],

                ]
        },
        lineWidth: 15,
        offset: 10
    }, {
        opposite: false,
        linkedTo: 0,
        gridLineWidth: 0,
        title: {
            text: 'parts per million',
            style: {
                color: '#444'
            }
        },
        lineColor: {
            linearGradient: [0, 0, 0, 300],
            stops: [
                [0, 'rgb(255, 0, 0)'],
                [0.5, 'rgb(255, 255, 0)'],
                [1, 'rgb(0, 255, 0)']
            ]
        },
        lineWidth: 15,
        offset: 10
    }]
    // ...

（请参阅http://jsfiddle.net/mmwhx/6/上的完整示例）

剩下的 10% 涉及对梯度“停止”的精确控制，以便它们对应于沿 y 轴的值（例如，从 50-100，条应该是绿色；从 100-200，条应该是黄色; 从 200 到轴的末端，条应该是红色的）。因为我没有限制沿 y 轴的值范围，所以无法使用 0-1.0 比例确定停止点的位置。

如果 y 轴的最大值以某种方式可用，我总是可以计算停止点。但是有些事情告诉我可能有一种更优雅的方式来实现我想要的，尽管不幸的是我没有偶然发现任何例子。

4

0 回答 0