javascript - 如何在 Javascript 中使用 Tradingview 轻量级图表为单行系列提供多种颜色？

Question

下面这张图片是我现在所拥有的。 下面这张图就是我想要的。 (第一张图片来 self 的代码，第二张图片来自交易 View )。

需要明确的是:我希望一条线有多种颜色。对于我的情况，我只需要两种颜色。我需要我创建的每条新线的颜色都可以改变。如果右侧的价格标签也更改为图表右侧部分线条的颜色，那就太好了。

这是我的代码:

var chart = LightweightCharts.createChart(document.getElementById("Chart"), {width: 1500, height: 700});

/**
 * Creates startline and adds extra options to the lineSeries.
 */
function initChartSettings() {
    // Init lines
    priceArea = chart.addAreaSeries();
    buySellLine = chart.addLineSeries();   //LINE THAT NEEDS TWO COLORS

    // Set start position of lines
    priceArea.setData([{time: '2019-04-11', value: startPrice}]);
    buySellLine.setData([{time: '2019-04-11', value: startPrice}]);

    // Visualization edits
    priceArea.applyOptions({
        topColor: 'rgba(70, 130, 180, 0.5)',
        bottomColor: 'rgba(70, 130, 180, 0.1)',
        lineColor: '#4682B4'
    });

    // Buy sell line
    buySellLine.applyOptions({
        color: '#42f54b',               //CHANGES COLOR OF THE COMPLETE LINE, FROM BEGIN TO END.
        priceLineVisible: true,
        lastValueVisible: true
    });

    updateChartStatic();
}


/**
 * Updates the chart its lines.
 */
function updateChartStatic() {
    setTimeout(() => {
        priceArea.update({
            time: yearMonthDay,   //How this works should not matter for question
            value: newPrice,      //Same as above
        });

        // Updates the price line of the chart.
        buySellLine.update({
            time: yearMonthDay,
            value: currentMovingAverage       //Even though it would be nice to do the below commented thing...
            // color: 'red or green (example)'
        });

        buySellLine.applyOptions({
            color: changeLineColor(currentMovingAverage, lastMovingAverage)  // CHANGES COMPLETE LINE :(
        });
    }, 1);
}

changeLineColor() 函数正在执行 if 语句，这与设置线条颜色无关。

Answer 1

编辑:由于此功能已在 v3.8 中推出，您可以通过使用数据中的以下属性将颜色属性简单地添加到任何数据项:

• LineData.color更改行数据项的颜色
• CandlestickData.color更改烛台项目的主体颜色
• CandlestickData.borderColor更改烛台项目的边框颜色
• CandlestickData.wickColor更改烛台项目的灯芯颜色

请注意，您不需要提供所有颜色，您可以只提供必要的颜色(例如，仅提供某些烛台项目的主体颜色)。

原始答案:

目前不可能，但此功能存在问题 https://github.com/tradingview/lightweight-charts/issues/195 。您可以订阅它，以便在修复时收到通知(甚至提出建议和/或提供更改后的 PR)。