Django 는 echarts 를 사용 하여 시각 적 으로 보 여 주 는 실천 을 합 니 다.

8281 단어 Djangoecharts가시 화
본 고 는 학생 성적 접선 도 전 시 를 예 로 들 었 다.
조건 부 준비
  • 컴퓨터 에 myslq 데이터베이스
  • echarts 의 js 파일
    • mysql 연결
    
# settings.py   

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        # mysql     
        'NAME': 'chaochao',
        # mysql      
        'USER': 'root',
        # myslq     
        'PASSWORD': 'chaochao666',
        'HOST': '',
        'PORT': '',
    }
}
    Django 연결 my sql 데이터베이스 튜 토리 얼 은 다른 글 에서 자세히 말 하지 않 습 니 다.
    Django 연결 my sql 데이터베이스 글 주소:https://www.jb51.net/article/176066.htm
    데이터 가 져 오기
    my sql 데이터베이스 에 데 이 터 를 직접 추가 할 수도 있 고,슈퍼 유저 가 admin 관리 페이지 에 데 이 터 를 추가 할 수도 있 습 니 다.
    
# models.py   

class Person(models.Model):
    #    str  
    name = models.CharField(max_length=20,verbose_name='  ')
    #    int 
    age=models.IntegerField(verbose_name='  ')
    #    float  
    score = models.FloatField(verbose_name='  ')
    데이터베이스 내용:
    在这里插入图片描述
    echarts 시각 화 전시 사용 하기
    정적 파일 디 렉 터 리 설정(즉 static 디 렉 터 리)
    
# settings.py   

STATICFILES_DIRS=(os.path.join(BASE_DIR,'static'),)
    다음 디 렉 터 리 구조 만 들 기:
    在这里插入图片描述
    js 디 렉 터 리 에 있 는 echarts 의 js 파일 은 echarts 홈 페이지 에서 필요 한 버 전 을 다운로드 할 수 있 습 니 다.
    css 디 렉 터 리 에서 페이지 를 보 여주 기 위 한 css 파일
    echarts 홈 페이지 에서 보 여주 고 싶 은 인 스 턴 스 코드 를 찾 습 니 다.
    여기 서 사용 하 는 접 힌 그림 의 홈 페이지 주 소 는 다음 과 같 습 니 다.https://echarts.apache.org/examples/zh/editor.html?c=line-simple
    인 스 턴 스 코드:
    
option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};
    index.css 파일 내용:
    
#chart{
    height: 500px;
    width: 500px;
}
    echarts 가 보 여 주 는 도 표 는 html 의 div 요소 와 연결 되 어야 하 며,이 div 요 소 는 height 와 width 속성 을 지정 해 야 합 니 다.
    index.html 파일 내용
    현재 사용 하고 있 는 echarts 홈 페이지 인 스 턴 스 의 정적 데이터 입 니 다.다음은 my sql 데이터 베 이 스 를 사용 하 는 데이터 로 변 경 됩 니 다.
    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>     django    </title>
    <link rel="stylesheet" href="/static/css/index.css" rel="external nofollow" >
    <script src="/static/js/echarts.min.js"></script>
</head>
<body>
<h1>         </h1>
<div id="chart"></div>

<script>
    {#    echarts   #}
    var mychart = echarts.init(document.getElementById('chart'));
    {#       #}
    var option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
        }]
    };
    {#  echarts           #}
    mychart.setOption(option);

</script>
</body>
</html>
    현재 사용 하고 있 는 정적 데이터 입 니 다.페이지 효과 부터 살 펴 보 겠 습 니 다.
    在这里插入图片描述
    이미 그래프 를 볼 수 있 습 니 다.
    현재,우 리 는 my slq 데이터베이스 의 데이터 로 수정 합 니 다.
    우선,views.py 파일 을 작성 하여 데이터베이스 에 있 는 데 이 터 를 전단 페이지 로 전송 합 니 다.
    
from django.shortcuts import render
from .models import Person

# Create your views here.

def index(request):
    #    Person    ，            
    #           ，                   
    objs = Person.objects.all()

    # locals                         ， index.html   
    return render(request,'index.html',locals())
    在这里插入图片描述
    index.html 페이지 를 수정 하고 데이터베이스 에 있 는 정 보 를 참조 합 니 다.
    js 내용 만 수정 하면 됩 니 다.다음은 script 태그 의 내용 입 니 다.
    
<script>
    {#    echarts   #}
    var mychart = echarts.init(document.getElementById('chart'));

    {#  ，     javascript    #}
    var series_data = [];
    var xAxis_data = [];

    {#    ，                        #}
    {% for stu in objs %}
        series_data.push({{ stu.score }})
        xAxis_data.push({{ stu.name}})
    {% endfor %}

    {#       #}
    var option = {
        xAxis: {
            type: 'category',
            {# x               #}
            data: xAxis_data
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            {# y                ， score#}
            data: series_data,
            type: 'line'
        }]
    };
    {#  echarts           #}
    mychart.setOption(option);

</script>
    이제 전시 효 과 를 살 펴 보 겠 습 니 다.
    在这里插入图片描述
    도표 없 음
    당황 하지 말고 콘 솔 을 열 어 오류 메 시 지 를 보 세 요.
    在这里插入图片描述
    Django 템 플 릿 파일 에서 js 코드 가 데이터베이스 데 이 터 를 받 아들 일 때 현재 데이터 의 데이터 형식 을 판단 하지 않 기 때 문 입 니 다.
    바로 여기 서'초 초 과'라 는 문자열 을 변수 이름 으로 삼 았 습 니 다.
    해결 방법 은 매우 간단 하 다.
    
<script>
    {#    echarts   #}
    var mychart = echarts.init(document.getElementById('chart'));

    {#  ，     javascript    #}
    var series_data = [];
    var xAxis_data = [];

    {#    ，                        #}
    {% for stu in objs %}
        series_data.push({{ stu.score }})
        {#        #}
        xAxis_data.push("{{ stu.name}}")
    {% endfor %}

    {#       #}
    var option = {
        xAxis: {
            type: 'category',
            {# x               #}
            data: xAxis_data
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            {# y                ， score#}
            data: series_data,
            type: 'line'
        }]
    };
    {#  echarts           #}
    mychart.setOption(option);

</script>
    따옴표 의 위 치 는:
    {% for stu in objs %}
    series_data.push({{ stu.score }})
    {\#여기 따옴표 조심 하 세 요\#}
    xAxis_data.push("{{ stu.name}}")
    {% endfor %}
    在这里插入图片描述
    현재 볼 수 있 듯 이 x 축 좌 표 는 데이터베이스 에 있 는 학생 이름 으로 바 뀌 었 고 y 축 은 데이터베이스 에 있 는 학생 성적 으로 바 뀌 었 다.
    다른 echarts 도 표를 사용 하여 시각 적 으로 보 여 주 려 면 script 의 코드 만 수정 하면 됩 니 다.
    Django 가 echarts 를 사용 하여 시각 적 으로 보 여 주 는 실천 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Django echarts 시각 화 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!
    python 3+PyQt5+Qt Designer 인터페이스 시각 화 실현
    Pytorch 시각 화 된 몇 가지 실현 방법

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage