معرفی
در یکی از مقالات قبلی ام توضیح دادم که چگونه با استفاده از جی کوئری نمودار دایره ای ایجاد کنم ، اما آن نمودار پویا نبود، یک نمودار کاملاً ثابت بود که در آن داده ها به صورت ایستا ارائه می شد، نمودار به صورت ایستا ایجاد می شد. اگر سعی میکردید نمودار را با استفاده از آن مقاله ایجاد کنید، با مشکلات زیادی در ایجاد نمودار جدید با کلیک یک دکمه مواجه میشوید.
در این مقاله به شما در مورد نحوه ایجاد نمودارها (نمودار گوگل) به صورت پویا خواهم گفت .
در اینجا همه چیز پویا خواهد بود، داده ها از یک پایگاه داده واکشی می شوند، کد واحد برای تمام نمودارهایی که می خواهید بسازید نوشته می شود، بنابراین با استفاده از این مقاله قابلیت استفاده مجدد و قابلیت نگهداری کد شما بسیار بهبود می یابد.
من نمودارهایی را برای ایالت های مختلف و شهرهای آنها ایجاد خواهم کرد، به عبارت دیگر نمودارهای شهر به ایالت ایجاد خواهد شد.
مرحله 1
اول از همه من دو جدول ایجاد کردم، یکی برای ایالت ها و دیگری برای شهرها.
در جدول شهر StateID به عنوان یک کلید خارجی در نظر گرفته شده است و به این معنی است که ما در اطراف شناسه ایالات کار خواهیم کرد. من برخی از داده های ساختگی را در هر دو جدول ارائه کرده ام (شما می توانید جداول خود را ایجاد کنید).
اکنون دیتابیس ما تمام شده است و می توانیم به سمت کد حرکت کنیم.
گام 2
اکنون در حال ایجاد جدولی هستم که در آن نام ایالت روی دکمههای هر ردیف ارائه میشود. در اینجا من شناسه هر دکمه را ارائه میدهم و از این شناسهها به عنوان StateID جدول State استفاده میکنم، شما میتوانید دادههای جداول State را واکشی کنید و میتوانید خروجی را به جدول متصل کنید تا به این ترتیب نام ایالت شما و شناسه آنها پویا باشد ( اگر یکی از شما کدی را برای واکشی داده های جدول حالت و اتصال به جدول HTML می خواهید، می توانید آن را در بخش نظرات از من بخواهید).
- <body>
- <form id="form1" runat="server">
- <table id="chartTable">
- <tr>
- <td>
- <input type="button" id="1" class="callChart" value="Delhi" />
- </td>
- </tr>
- <tr>
- <td>
- <input type="button" id="2" class="callChart" value="Uttar Pradesh" />
- </td>
- </tr>
- <tr>
- <td>
- <input type="button" id="3" class="callChart" value="Bihar" />
- </td>
- </tr>
- <tr>
- <td>
- <input type="button" id="4" class="callChart" value="Maharashtra" />
- </td>
- </tr>
- </table>
- <div id="piechart">
- </div>
- <input type="hidden" id="hdn1" />
- </form>
- </body>
مرحله 3
حالا کد jQuery را می نویسم.
اول از همه یک مرجع برای jQuery و Google Charts در قسمت head صفحه خود به این صورت اضافه کنید:
- <head runat="server">
- <title></title>
- <script type="text/javascript" src="https://www.google.com/jsapi"></script>
- <script src="jquery-1.7.1.js"></script>
- </head>