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

ホームページ

ウェブフロントエンド

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);    }}

最終的な表示効果:

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

Web開発にとってHTMLタグが重要なのはなぜですか？May 02, 2025 am 12:03 AM

htmltagsareSterenceforwebdevelovementasyStheStructureanhandhancewebpages.1）theydefineLayout、semantics、and-interactivity.2）semanticagsimprovecessibility.3）opeusofusofagscanoptimizeperformanceandensurecross-brows-compativeation。

HTMLタグと属性に一貫したコーディングスタイルを使用することの重要性を説明します。May 01, 2025 am 12:01 AM

コードの読みやすさ、保守性、効率を向上させるため、一貫したHTMLエンコーディングスタイルは重要です。 1）低ケースタグと属性を使用します。2）一貫したインデントを保持し、3）シングルまたはダブルの引用符を選択して固執する、4）プロジェクトのさまざまなスタイルの混合を避け、5）きれいなスタイルやEslintなどの自動化ツールを使用して、スタイルの一貫性を確保します。

ブートストラップ4にマルチプロジェクトカルーセルを実装する方法は？Apr 30, 2025 pm 03:24 PM

Bootstrap4にマルチプロジェクトカルーセルを実装するソリューションBootstrap4にマルチプロジェクトカルーセルを実装するのは簡単な作業ではありません。ブートストラップですが...

DeepSeekの公式Webサイトは、マウススクロールイベントの浸透の影響をどのように達成していますか？Apr 30, 2025 pm 03:21 PM

マウススクロールイベントの浸透の効果を実現する方法は？ Webを閲覧すると、いくつかの特別なインタラクションデザインに遭遇することがよくあります。たとえば、DeepSeekの公式ウェブサイトでは、...

HTMLビデオの再生コントロールスタイルを変更する方法Apr 30, 2025 pm 03:18 PM

HTMLビデオのデフォルトの再生コントロールスタイルは、CSSを介して直接変更することはできません。 1. JavaScriptを使用してカスタムコントロールを作成します。 2。CSSを介してこれらのコントロールを美化します。 3. video.jsやPLYRなどのライブラリを使用すると、互換性、ユーザーエクスペリエンス、パフォーマンスを検討してください。プロセスを簡素化できます。

お使いの携帯電話でネイティブセレクトを使用することにより、どのような問題が発生しますか？Apr 30, 2025 pm 03:15 PM

携帯電話でネイティブセレクトを使用する際の潜在的な問題は、モバイルアプリケーションを開発するときに、ボックスを選択する必要があることがよくあります。通常、開発者...

お使いの携帯電話でネイティブ選択を使用することの欠点は何ですか？Apr 30, 2025 pm 03:12 PM

お使いの携帯電話でネイティブ選択を使用することの欠点は何ですか？モバイルデバイスでアプリケーションを開発する場合、適切なUIコンポーネントを選択することが非常に重要です。多くの開発者...

Three.jsとOctreeを使用して部屋で3人のローミングの衝突処理を最適化する方法は？Apr 30, 2025 pm 03:09 PM

Three.JSとOctreeを使用して、部屋でのサードパーソンローミングの衝突処理を最適化します。 3つのjsでoctreeを使用して、部屋でサードパーソンローミングを実装し、衝突を追加してください...

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。