ホームページ > 記事 > ウェブフロントエンド > 小規模サイトを作る(1) チャートを作る必要があるdisplay_html/css_WEB-ITnose
小規模サイトを作る(1) チャートを作る必要があるdisplay_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:29:30907ブラウズ
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); }} 最終的な表示効果: