django javascript中的图表不改变颜色

anauzrmj  于 2023-01-03  发布在  Go
关注(0)|答案(2)|浏览(139)

我有一个问题,在javascript与建设金融烛台图表。我做了一个图表与apex.js,它显示正确的数据,它应该是,但图表的颜色不改变,当股价上涨烛台应该是绿色的,当它下跌它应该是红色的,但在一些股票烛台总是红色,在一些股票它的工作很好。这里有图片,这两个图表使用相同的代码,但不同的数据,因为它是不同的股票,但这并不意味着它应该这样显示.

下面是图表的代码:

<div id="chart">

    </div>
    <script>

        var options = {
            series: [{
                name: 'OHLC',
                data: [
                    {% for stock in stocks %}          
    {
                x: new Date("{{stock.date}}"),
                y: [Number("{{stock.open}}"), Number("{{stock.high}}"), Number("{{stock.low}}"), Number("{{stock.price}}")],
            },
            {% endfor %}
            ]
        },
    ],
        chart: {
            type: 'candlestick',                     
        },
        title: {
            text: '{{ticker}} Stock ',
                align: 'center'
        },
        yaxis: {
            tooltip: {
                enabled: true
            }
        }
    };

        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();
    </script>

我在后台使用Django,所以这里有一个返回图表数据的函数:

@login_required(login_url='stock:login')
def chart(request, ticker):
    stocks = Stock.objects.filter(ticker = ticker).order_by('date')
    context = {'stocks':stocks, 'ticker':ticker}
    return render(request, 'stock_app/chart.html', context)

我为此挣扎了几天,甚至没有取得任何进展,有人能帮助我或至少告诉我问题可能在哪里,我将非常感谢。我检查了数据库,数据和代码,切换了一些服务,并使用chart.js,plotly,还有一些其他的,总是同样的问题。我还检查了雅虎财经的数据,看有没有显示正确的股票,数据是正确的。

42fyovps

42fyovps1#

通常,当您更换库时,如果问题仍然存在,则问题不可能是库;相反,提供的数据可能包含错误的信息,导致图表上的分辨率不一致。
我看到您没有在规范中特别指定烛台颜色,所以这可能值得一试,尽管它可能只是基本配置:

plotOptions: {
    candlestick: {
      colors: {
        upward: '#3C90EB',
        downward: '#DF7D46'
      }
    }
  }

https://apexcharts.com/docs/chart-types/candlestick/
然而,如果问题是数据本身,你应该提供一个有问题的股票的摘录,也是一个它的工作刚刚好。不要踩太深的顶点,也许高/低或开盘/收盘是混合或错误的。

sigwle7e

sigwle7e2#

很难说没有你的数据集会发生什么。但是,我怀疑你的xaxis缺乏配置,特别是因为你的时间尺度似乎不一致。你能把这个放在你的选项中,看看会发生什么吗?

xaxis: {
  type: 'datetime'
},

你也可以有一个分类轴和一个蜡烛图,但是你可能需要额外的配置(例如,一个格式化程序)。Category x-axis – ApexCharts.js
为了方便起见,我粘贴了下面的示例。
x一个一个一个一个x一个一个二个x

相关问题