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 Framework中的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中执行查询以处理大量数据。

Plotly.js连接到Django Rest Framework API - 这是可能的，如果是这样的话怎么样？

1 个答案: