python - Plotly.js 连接到 Django Rest Framework API - 这可能吗？如果可能的话，如何实现？

Question

我正在我们公司的网络应用程序中测试plotly的使用。我知道plotly有它自己的API，但是可以连接到Django Rest框架API，因为它是基于python的？

如果可能的话 - 语法是什么样的？这是我到目前为止所拥有的:

div id="myDiv"></div>
  <script>
  var trace1 = {
  x: [1, 2, 3, 4],
  y: [10, 15, 13, 17],
  type: 'scatter'
};

var trace2 = {
  x: [1, 2, 3, 4],
  y: [16, 5, 11, 9],
  type: 'scatter'
};

var data = [trace1, trace2];

Plotly.newPlot('myDiv', data);
  </script>

我不想在“x”和“y”中硬编码数据 - 我想指向 Django Rest 框架中的 json。数据库是MySQL。任何帮助是极大的赞赏!!!

谢谢!

Answer 1

我不确定这是否是您正在寻找的，但就我而言，我需要它连接到 django 中模型的数据。 为了做到这一点，我在我的views.py中有这个

from rest_framework.decorators import api_view
from rest_framework.response import Response
from .models import MyModel

@api_view(['GET'])
def index(request):
    entries = MyModel.objects
    data = entries.values('x', 'y')
    context = {
        'x': [i['x'] for i in data],
        'y': [i['y'] for i in data]
    }
    print(context)
    return Response(context)

在我的plot.js 文件中

import React from 'react';
import Plot from 'react-plotly.js';

class Plot extends React.Component {
  state = {}

  async reload () {
      let url = '<django server address to view>'
      const res = await fetch(url);
      const info = await res.json();
      console.log(info)
      this.setState({
          x: info.x,
          y: info.y,
      });
  }

  async componentDidMount() {
      this.reload();
  }

  render() {
    return (
      <Plot
        data={[
          {
            x: this.state.x,
            y: this.state.y,
            type: 'scatter',
            mode: 'points-lines',
            marker: {color: 'red'},
          },
        ]}
        layout={ {width: 600, height: 480, title: 'A Fancy Plot'} }
      />
    );
  }
}

export default Plot

从那里您可以在您的 React 应用程序中使用 Plot 组件。

但是，我想知道是否有更有效的方法在 django 中进行查询来处理大量数据..