小規模サイトを作る(1) チャートを作る必要があるdisplay_html/css

WebサーバーにHTMLとCSSを追加します

html content

データを取得するための Ajax

car.js

最終的な表示効果:

ホームページ

ウェブフロントエンド

htmlチュートリアル

小規模サイトを作る(1) チャートを作る必要があるdisplay_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:29 AM

Xiaobi は最近車を購入したいと考えています。価格が比較的安いときに購入したいと考えています。マスターたちは、データがすべての源だと言いました。プログラマーとして、私はクローラーを使用して、有名な Web サイト上のすべての車の価格をクロールしました。

ただ、データだけでは直感的ではないので、グラフで表示する必要があると思います。昔、Web ページにグラフを表示するために Flash が使用されていたことを今でも覚えています。その後、しばらくの間、事前に画像を生成するためにいくつかのバックグラウンドテクノロジ (Microsoft の MSChart コントロールなど) が使用されました。しかし、最近ではフロントエンドがますます強力になっているため、Xiaobi はこれを行うためにフロントエンド JS を使用することにしました。フロントエンドチャートコントロールの世界にはさまざまなホイールがあり、それぞれにメリットがありますが、pm、po、dev、test、ceo、cto、cfoを組み合わせた初心者にとっては問題ありません。最後に、私は尻を叩いて、echartを使用することにしました。

echart は Du の義母の息子です。文書のアドレスはこちらです: http://echarts.baidu.com/。 Xiaobai はドキュメントを見た後、少しわかりにくいと感じましたが、ECharts を始めるための 5 分間のガイドがここにあります。Xiaobi は、このヒストグラムが非常に見やすいと考え、価格の表示に使用することにしました。

WebサーバーにHTMLとCSSを追加します

Xiaobaiのサーバー言語はJavaを使用し、フレームワークはspringbootを使用します。 Xiaobaiはよく胸をオナニーしていましたが、これらのものを使用したことがありません。HTMLとCSSをどこに配置すればよいかわかりません。しかし、万能の stackoverflow マスターの助けを借りて、html を配置すべき場所が見つかります:

/META-INF/resources//resources//static//public/

ログイン後にコピー

Xiaobi は static という名前を好むため、次のようなプロジェクト構造になっています:

html content

<!DOCTYPE html><html><header>    <meta charset="utf-8">    <script src="../js/echarts.min.js"></script></header><body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">    // 基于准备好的dom，初始化echarts实例    var myChart = echarts.init(document.getElementById('main'));    // 指定图表的配置项和数据    var option = {        title: {            text: 'ECharts 入门示例'        },        tooltip: {},        legend: {            data: ['销量']        },        xAxis: {            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]        },        yAxis: {},        series: [{            name: '销量',            type: 'bar',            data: [5, 20, 36, 10, 10, 20]        }]    };    // 使用刚指定的配置项和数据显示图表。    myChart.setOption(option);</script></body></html>

ログイン後にコピー

次に URL を開きます:

EChart の最初のキルが正常に完了しました。

データを取得するための Ajax

インターフェースはほとんど同じですが、何か問題があるようです。つまり、データは独自のデータベースから取得されません。現時点では、データを取得するために Ajax を使用する必要があります。。 Xiaobai がフロントエンドの JS スクリプトを書いたのは久しぶりだったので、Xiaohei に解決策を尋ねました。 Xiaobai のリクエストは非常にシンプルです:

1 シンプル

2 ajax を送信できる

3 少しクール

4 jquery は好きではない

Xiaohei はこのリクエストを受け取った後、A プロジェクトのごみ箱から取り出しました。テンプレートは Xiaobai に与えられたので、次の構造が生まれました:

<script src="js/zquery.js"></script><script src="js/echarts.js"></script><script src="js/util.js"></script><script src="js/car.js"></script>

ログイン後にコピー

私は長い間フロントエンドに取り組んでいなかったので、最初に関数を実装しました:

car.js

function getItem() {    $.post(util.getAbsUrl("report/car"),        {},        function (data) {            show(data);        });};function show(data) {    var myChart = echarts.init(document.getElementById('main'));    var shops = [];    var prices = [];    for (var i = 0; i < data.cars.length; i++) {        var car = data.cars[i];        shops.push(car.shopName)        prices.push(car.price);    }    var option = {        title: {            text: '黑店报价'        },        tooltip: {},        legend: {            data: ['报价']        },        xAxis: {            data: shops        },        yAxis: {},        series: [{            name: '报价',            type: 'bar',            data: prices        }]    };    myChart.setOption(option);};

ログイン後にコピー

Xiaobi だけが知った彼がここに来たとき、なぜまだ同じように見えるのですか? jquery を使用してください。

サーバー側コード:

@RestControllerpublic class ReportController {    @Autowired    private CarDao carDao;    @RequestMapping(value = "/report/car")    public CarResponse getCarReport() {        CarResponse response = new CarResponse();        TimeZone.setDefault(TimeZone.getTimeZone("GMT+8"));        Calendar todayStart = GregorianCalendar.getInstance();        todayStart.add(Calendar.DATE, -1);        Date endTime = todayStart.getTime();        todayStart.add(Calendar.DATE, -1);        Date startTime = todayStart.getTime();        response.setCars(carDao.getCarByTime(startTime, endTime));        return response;    }}

ログイン後にコピー

私があまり慣れていないせいで、時間処理に多くのトラブルが発生しました。

ところで、Java カレンダーの使い方を教えますので、Lei Feng と呼んでください:

import java.util.Calendar;public class Test{    public static void main(String[] args)    {        Calendar cal = Calendar.getInstance();        int year = cal.get(Calendar.YEAR);        //比当前月份少1        int month = cal.get(Calendar.MONTH);        //date表示日期，day表示天数，所以date与day_of_month相同        int date = cal.get(Calendar.DATE);        int dayOfMonth = cal.get(Calendar.DAY_OF_MONTH);        //表示本周的第几天，从周日开始计算        int dayOfWeek = cal.get(Calendar.DAY_OF_WEEK);        int dayOfYear = cal.get(Calendar.DAY_OF_YEAR);        //12小时制        int hour = cal.get(Calendar.HOUR);        //24小时制        int hourOfDay = cal.get(Calendar.HOUR_OF_DAY);        int minute = cal.get(Calendar.MINUTE);        int second = cal.get(Calendar.SECOND);        int millisecond = cal.get(Calendar.MILLISECOND);        int maxDate = cal.getActualMaximum(Calendar.DATE);        System.out.println("现在的年份为:" + year);        System.out.println("现在的月份为:" + month);        System.out.println("现在的号为:" + date);        System.out.println("现在的号为:" + dayOfMonth);        System.out.println("现在是星期:" + dayOfWeek);        System.out.println("现在过了的天数为:" + dayOfYear);        System.out.println("现在几点:" + hour);        System.out.println("现在几点:" + hourOfDay);        System.out.println("现在几分:" + minute);        System.out.println("现在几秒:" + second);        System.out.println("现在几毫秒:" + millisecond);        System.out.println("本月最后一天是:" + maxDate);    }}

ログイン後にコピー