标签: lightweight-charts

我正在尝试在我的项目中使用该lightweight-charts包nextjs，但是当我尝试调用该createChart函数时，我在 Nodejs 控制台中收到此错误。

...\lightweight-charts\dist\lightweight-charts.esm.development.js:7
import { bindToDevicePixelRatio } from 'fancy-canvas/coordinate-space';
^^^^^^

SyntaxError: Cannot use import statement outside a module

成分：

import styled from "styled-components"
import { createChart } from 'lightweight-charts';

const Wrapper = styled.div``

const CoinPriceChart = () => {
  const chart = createChart(document.body, { width: 400, height: 300 });
  return <Wrapper></Wrapper>
}

export default CoinPriceChart

页：

import styled from "styled-components"
import CoinPriceChart from "../../components/charts/CoinPriceChart"

const Wrapper = styled.div``

const CoinDetailPage = () => …

我是 Tradingview 图表库的新手，我想创建类似的响应式图表。

问题是，交易视图图表库需要指定宽度和高度。这是代码。

const chart = LightweightCharts.createChart(e, {
      width: e.offsetWidth,
      height: e.offsetHeight,
      layout: {
        backgroundColor: 'rgb(17, 17, 39)',
        textColor: 'rgba(255, 255, 255, 0.9)',
      },
      grid: {
        vertLines: {
          color: 'rgb(41, 44, 58)',
        },
        horzLines: {
          color: 'rgb(41, 44, 58)',
        },
      },
      crosshair: {
        mode: LightweightCharts.CrosshairMode.Normal,
      },
      priceScale: {
        borderColor: 'rgba(197, 203, 206, 0.8)',
      },
      timeScale: {
        borderColor: 'rgba(197, 203, 206, 0.8)',
      },
    });

我刚刚将比特币的实时数据添加到我的图表中。已经出现了一个如此之高的峰值，甚至交易视图都无法处理它......至少在我的图表上是这样。它是这样的： 正如你所看到的，6 月 2 日，比特币的涨幅如此之高，以至于它已经走出了屏幕。这应该是可以修复的，因为在实际的交易视图页面本身上，一切看起来都很好并且正常： 另外，如果我缩小图表，它看起来完全正常： 所以我想要的是我的图表的缩放方式与 Tradingview.com 上的相同。

这是我的代码：

// Predifined variables
var chart, priceArea, fetchedData;

// Faster to write log();
const log = console.log;

// Get data.
fetch('./getData.php', {
    method: 'GET'
}).then(response => response.json()).then(function (data) {
    // Set data to a global variable for global usage.
    fetchedData = data;

    // To make sure the chart is initialized and set after this fetch is done. Else I would get a error for setting data that I do …

轻量级图表版本：3.1.3

我正在 Vue 项目中的加密货币交易应用程序中使用您的图表，但无论我收到什么错误，下面都是示例代码

没有重复或空数据。

import {createChart} from "lightweight-charts";
export default {
data() {
return {
                chartProperties: {
                  width: 700,
                  height: 300,
                  timeScale: {
                     timeVisible: true,
                     secondsVisible: false
                },
                layout: {
                    //backgroundColor: '#262C49', //Dark Theme
                    //textColor: '#80859E',
                    fontSize: 12,
                    fontFamily: 'irsans ,Calibri'
                }
            },
            chartData: [],
            candleSeries: null,
}
}
mounted() {

let cdata = [
{
close: 22750.76
high: 22759.53
low: 22750.25
open: 22752.8
time: 1608635340
},
....
];

this.chartElement = document.getElementById('chart');
this.chartProperties.width = this.chartElement.offsetWidth;
this.chart = createChart(this.chartElement, …

在示例中，轻量级图表 TradingView显示了每日时间范围内的绘图，但我无法弄清楚如何正确地将数据传递给 setData 以便使用每小时和分钟时间范围。

请告诉我。

import { createChart } from 'lightweight-charts';

const chart = createChart(container);

const areaSeries = chart.addAreaSeries();
areaSeries.setData([
    { time: '2018-12-22', value: 32.51 },
    { time: '2018-12-23', value: 31.11 },
    { time: '2018-12-24', value: 27.02 },
    { time: '2018-12-25', value: 27.32 },
    { time: '2018-12-26', value: 25.17 },
    { time: '2018-12-27', value: 28.89 },
    { time: '2018-12-28', value: 25.46 },
    { time: '2018-12-29', value: 23.92 },
    { time: '2018-12-30', value: 22.68 },
    { time: '2018-12-31', value: …

我有一个像这样的轻量级图表设置。我想添加某种配置，以便图表可以向我显示本地时间，而不是通过 Unix 时间戳传递的通用时间，例如，它与我的时间相差几个小时。另一种可能性是修改 Unix 时间戳。

var chart = LightweightCharts.createChart(document.getElementById("charts"), {
  width: 1060,
  height: 537,
  layout: {
    backgroundColor: "#161616",
    textColor: "rgba(255, 255, 255, 0.9)",
    fontSize: 15,
    fontFamily: "Ubuntu",
  },
  grid: {
    vertLines: {
      color: "#424242",
      width: 0.3,
    },
    horzLines: {
      color: "#424242",
      width: 0.3,
    },
  },
  crosshair: {
    mode: LightweightCharts.CrosshairMode.Normal,
  },
  priceScale: {
    borderColor: "rgba(197, 203, 206, 0.8)",
    size: 5,
  },
  timeScale: {
    borderColor: "rgba(197, 203, 206, 0.8)",
    timeVisible: true,
    secondsVisible: false,
    rightBarStaysOnScroll: true,
  },
});

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

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

这是我的代码：

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 …

不确定这是否是一个限制，但我无法让图表显示所有数据（我有 1500 条记录）。fitContent() 或 setVisibleRange() 没有帮助。

演示

var chart = LightweightCharts.createChart(document.body, {
    width: 600,
    height: 300,
    rightPriceScale: {
        scaleMargins: {
            top: 0.1,
            bottom: 0.1,
        },
    },
});

var areaSeries = chart.addAreaSeries({
    topColor: 'rgba(76, 175, 80, 0.56)',
    bottomColor: 'rgba(76, 175, 80, 0.04)',
    lineColor: 'rgba(76, 175, 80, 1)',
    lineWidth: 2,
    title: 'AAPL',
});

areaSeries.setData([{
    "time": 1629353327,
    "value": 19.97
}, {
    "time": 1629439727,
    "value": 19.67
},
....
}]);
chart.timeScale().fitContent();

这是预期的吗？如果图表宽度设置为 800px，它将起作用。

我在我的应用程序中实现了tradingview的轻量级图表，图表如下所示。最后价格有一条水平虚线。

是否可以隐藏水平线？

我正在使用[lightweight-charts] javascript 库来生成一些图表。对于此示例，我使用实时仿真图表。

在此示例中，背景颜色为白色。我想将背景颜色设置为黑色。我正在遵循文档，但无法实现目标。

以下是我正在使用的代码，但它不起作用：

var chart = LightweightCharts.createChart(document.getElementById('chart'), {
    width: 1200,
    height: 800,
    background: '#000000',
    textColor: '#ffffff'
});


var candleSeries = chart.addCandlestickSeries();
var data = [...]

我缺少什么？