#javascript #chart.js
Вопрос:
В настоящее время работаю над своим портфолио, и я включаю некоторые графики, используя chart.js. Я могу построить две гистограммы и работать над своим кейсом облачного хранилища, но не могу заставить круговую диаграмму работать над моим кейсом BusyBus. Вот код js диаграммы для круговой диаграммы и код моего тематического исследования BusyBus. В идеале круговая диаграмма должна отображаться там, где я прокомментировал lt;!—Круговая диаграмма здесь—gt; Заранее благодарю вас!
var pieChart = new Chart(buspie, { type: 'pie', data: { labels: ["Green", "Blue", "Gray", "Purple", "Yellow", "Red", "Black"], datasets: [{ backgroundColor: [ "#2ecc71", "#3498db", "#95a5a6", "#9b59b6", "#f1c40f", "#e74c3c", "#34495e" ], data: [12, 19, 3, 17, 28, 24, 7] }] } }); ----------------------------------------------------------------------------------- lt;!DOCTYPE htmlgt; lt;htmlgt; lt;headgt; lt;meta charset="utf-8"gt; lt;meta http-equiv="X-UA-Compatible" content="IE=edge"gt; lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt; lt;link rel="stylesheet" href="css/style.css"gt; lt;titlegt;Portfolio | Lily Wult;/titlegt; lt;/headgt; lt;bodygt; lt;div class="container"gt; lt;headergt; lt;a href="index.html" id="logo-home"gt;lt;img class="logo" src="images/logo.svg" alt="logo"gt;lt;/agt; lt;navgt; lt;ul class="nav__links"gt; lt;ligt;lt;a href="#selected-work"gt;Worklt;/agt;lt;/ligt; lt;ligt;lt;a href="about.html"gt;Aboutlt;/agt;lt;/ligt; lt;ligt;lt;a href="#"gt;Resumelt;/agt;lt;/ligt; lt;/ulgt; lt;/navgt; lt;a class="cta" href="contact.html"gt;lt;buttongt;Contactlt;/buttongt;lt;/agt; lt;a onclick="openNav()" class="menu" href="#"gt;lt;buttongt;Menult;/buttongt;lt;/agt; lt;/headergt; lt;!---Mobile Nav---gt; lt;div id="mobile__menu" class="overlay"gt; lt;a class="close" onclick="closeNav()"gt;amp;times;lt;/agt; lt;div class="overlay__content"gt; lt;a href="index.html"gt;Worklt;/agt; lt;a href="about.html"gt;Aboutlt;/agt; lt;a href="#"gt;Resumelt;/agt; lt;a href="contact.html"gt;Contactlt;/agt; lt;/divgt; lt;/divgt; lt;script type ="text/javascript" src="mobile.js"gt;lt;/scriptgt; lt;!---BusyBus Case Study Info---gt; lt;section class="canopy-title"gt; lt;h1gt;BusyBuslt;/h1gt; lt;/sectiongt; lt;section class="canopy-description"gt; lt;p id="canopy-header-p"gt;BusyBus is a public transit application that helps bus riders determine what time their bus is arriving to plan trips efficiently.lt;/pgt; lt;/sectiongt; lt;!---BusyBus BUTTONS---gt; lt;section class="busybus-buttons"gt; lt;articlegt; lt;a class="view-mobile" href="canopy.html"gt;lt;buttongt;View Mobile Prototypelt;/buttongt;lt;/agt; lt;/articlegt; lt;/sectiongt; lt;!---BusyBus PICS---gt; lt;section class="busybus-pics"gt; lt;article class="busybus-mobile-img"gt; lt;img id="busybus-mobile-pic" src="images/busybusmain.jpg" alt="canopy"gt; lt;/articlegt; lt;/sectiongt; lt;!---BusyBus Design Roles, Deliverables, Specifications---gt; lt;section class="canopy-overview"gt; lt;article class="canopy-design-roles"gt; lt;h4gt;Design Roleslt;/h4gt; lt;ulgt; lt;ligt;UX Designlt;/ligt; lt;ligt;Visual Designlt;/ligt; lt;ligt;Branding amp; Identitylt;/ligt; lt;/ulgt; lt;/articlegt; lt;article class="canopy-deliverables"gt; lt;h4gt;Deliverableslt;/h4gt; lt;ulgt; lt;ligt;User Surveyslt;/ligt; lt;ligt;Personaslt;/ligt; lt;ligt;Competitive Analysislt;/ligt; lt;ligt;Concept amp; Brand Identitylt;/ligt; lt;ligt;User Storieslt;/ligt; lt;ligt;User Flowslt;/ligt; lt;ligt;Wireframeslt;/ligt; lt;ligt;User Testinglt;/ligt; lt;/ulgt; lt;/articlegt; lt;article class="canopy-specifications"gt; lt;h4gt;Specificationslt;/h4gt; lt;ulgt; lt;ligt;lt;stronggt;Tools amp; Softwarelt;/stronggt;lt;/ligt; lt;ligt;Figmalt;/ligt; lt;ligt;UsabilityHublt;/ligt; lt;ligt;Duration: 2 weekslt;/ligt; lt;/ulgt; lt;/articlegt; lt;/sectiongt; lt;!---BusyBus Problem amp; Solution---gt; lt;section class="canopy-problem-solution"gt; lt;articlegt; lt;h4gt;Problem: Addition of New Bus Routes Cause Rider Confusion lt;/h4gt; lt;p id="canopy-body-text"gt;Due to the addition of new bus routes, there are different buses stopping at the same bus stop. Bus riders need to know if the approaching bus is the bus they need to get on, or what time their desired bus is arriving at.lt;/h4gt; lt;h4gt;Solution: Bus Arrival Times Helps Riders Plan Efficient Tripslt;/h4gt; lt;p id="canopy-body-text"gt;Design an app for bus riders to see what time their bus is arriving at the current bus stop. The app should show:lt;brgt;lt;brgt;1) Bus number and terminal namelt;brgt;lt;brgt;2) Show bus arrival time in minuteslt;brgt;lt;brgt;3) Ability to see when the following bus is arrivinglt;/pgt; lt;/articlegt; lt;/sectiongt; lt;!---BusyBus 01 Research amp; Define---gt; lt;section class="canopy-process-section"gt; lt;h2gt;What Public Transit Apps Are Out There?lt;/h2gt; lt;h6gt;Competitive Analysislt;/h6gt; lt;p id="canopy-body-text"gt;In order to better understand the competition and the client's required features for this product, I did a competitive analysis of two public transit apps Moovit and Google Mapslt;/pgt; lt;/sectiongt; lt;div class="busybus-competition-container"gt; lt;div class="busybus-competition"gt; lt;h5gt;Moovitlt;/h5gt; lt;img id="moovit-pic" src="images/moovit.png" alt="google"gt; lt;div class="busybus-competition-text"gt; lt;img id="check-icon" src="images/check-icon.png" alt="check-icon"gt; lt;p id="busybus-card-text"gt;Suggests the bus route to get to the desired destinationlt;/pgt; lt;img id="x-icon" src="images/x-icon.png" alt="x-icon"gt; lt;p id="busybus-card-text"gt;Does not show what direction the bus is bound for.lt;/pgt; lt;img id="x-icon" src="images/x-icon.png" alt="x-icon"gt; lt;p id="busybus-card-text"gt;The mintues next to the bus number may be misleading since it shows the minutes it takes to get to the destination, and not in how many minutes the bus will arrivelt;/pgt; lt;/divgt; lt;/divgt; lt;div class="busybus-competition"gt; lt;h5gt;Google Mapslt;/h5gt; lt;img id="googlemaps-pic" src="images/googlemaps.png" alt="google"gt; lt;div class="busybus-competition-text"gt; lt;img id="check-icon" src="images/check-icon.png" alt="check-icon"gt; lt;p id="busybus-card-text"gt;Recommends a bus route to get to the desired destinationlt;/pgt; lt;img id="x-icon" src="images/x-icon.png" alt="x-icon"gt; lt;p id="busybus-card-text"gt;Does not fully show the whole bus route name/directionlt;/pgt; lt;img id="x-icon" src="images/x-icon.png" alt="x-icon"gt; lt;p id="busybus-card-text"gt;The minutes next to the bus number may be misleading since it shows the minutes it takes to get to the destination, and not in how many minutes the bus will arrivelt;/pgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;section class="canopy-text-block"gt; lt;p id="canopy-body-text"gt;These platforms are well established within the public transit app space. They have a great set of features that keep users satisfied. However, improvements can be made in regards to the display of bus information. This allows a newcomer to enter the market. As a newcomer, BusyBus can provide clear bus information to the rider and help them better plan and schedule trips that require public transit.lt;/pgt; lt;/sectiongt; lt;section class="results-button"gt; lt;a class="click-through-button" href="canopy.html"gt;lt;buttongt;View SWOT Analysislt;/buttongt;lt;/agt; lt;/sectiongt; lt;!---BusyBus User Surveys---gt; lt;section class="canopy-text-block"gt; lt;h6gt;User Surveylt;/h6gt; lt;p id="canopy-body-text"gt;To better understand the features that would a part of BusyBus, I conducted a user survey to find out what information is the most important to bus riders.lt;/pgt; lt;/sectiongt; lt;!---BusyBus Pie Chart Here---gt; lt;section class="user-graph-1"gt; lt;canvas id="pieChart"gt;lt;/canvasgt; lt;/sectiongt; lt;section class="canopy-text-block"gt; lt;p id="canopy-body-text"gt;The majority of public transit app users believe improvements could be made on the current app they are using.lt;/pgt; lt;/sectiongt; lt;!---BusyBus Bar Chart Here---gt; lt;section class="canopy-text-block"gt; lt;p id="canopy-body-text"gt;The survey results indicate a majority of users value features such as seeing real time updates in regards to alerts on bus routes, as well as seeing when the following bus is arriving.lt;/pgt; lt;/sectiongt; lt;section class="cloud-uses-title"gt; lt;h4gt;Top 2 Features To Include in BusyBus First Iterationlt;/h4gt; lt;/sectiongt; lt;div class="busybus-competition-container"gt; lt;div class="busybus-feature"gt; lt;h5gt;Alerts for bus routeslt;/h5gt; lt;img id="bus-icon" src="images/alert_bus.png" alt="google"gt; lt;/divgt; lt;div class="busybus-feature"gt; lt;h5gt;Arrival time of current bus and next buslt;/h5gt; lt;img id="bus-icon" src="images/arrival_bus.png" alt="google"gt; lt;/divgt; lt;/divgt; lt;section class="canopy-text-block"gt; lt;p id="canopy-body-text"gt;Additional features that users would also like to see in an improved public transit app include being able to see how long it would take to get to the bus stop from their current location. This can help users better plan their trips. These additional features will be factored into later iterations of this app.lt;/pgt; lt;p id="canopy-body-text"gt;lt;bgt;The user survey has helped identify the first set of features for BusyBus. BusyBus will help users identify different buses and arrival times due to the bus route expansion in the city.lt;/bgt;lt;/pgt; lt;/sectiongt; lt;section class="results-button"gt; lt;a class="click-through-button" href="canopy.html"gt;lt;buttongt;View User Survey Analysislt;/buttongt;lt;/agt; lt;/sectiongt; lt;section class="canopy-process-section"gt; lt;h2gt;Identifying the Userslt;/h2gt; lt;h6gt;02 Strategylt;/h6gt; lt;p id ="canopy-body-text"gt;Based on the user research results, two personas were created to help further identify the direction of this new public transit app.lt;/pgt; lt;/sectiongt; lt;section class="user-personas"gt; lt;articlegt; lt;h5gt;Aleena, 32 years old - Sr. Software Engineerlt;/h5gt; lt;img id="user1" src="images/bus_user1.png" alt="persona1"gt; lt;pgt;"There are so many buses that stop at my stop, it would be great to know when the bus I want to get on is arriving. Also if there were any delays, I would like to know in advance."lt;/pgt; lt;div class="user-needs"gt; lt;pgt;Goalslt;/pgt; lt;ulgt; lt;ligt;Being able to see what time the desired bus is arriving at, as well as what time the next bus is arrivinglt;/ligt; lt;ligt;Being able to see any sudden changes in the bus schedulelt;/ligt; lt;/ulgt; lt;/divgt; lt;div class="user-needs"gt; lt;pgt;Frustrationslt;/pgt; lt;ulgt; lt;ligt;Delayed buses causes delay in getting to worklt;/ligt; lt;ligt;Not knowing about bus delays in advance in order to find alternative modes of transportationlt;/ligt; lt;ligt;Changes in bus routes might mean getting on the wrong buslt;/ligt; lt;/ulgt; lt;/divgt; lt;/articlegt; lt;articlegt; lt;h5gt;Kevin, 22 years old - Business Studentlt;/h5gt; lt;img id="user1" src="images/bus_user2.png" alt="persona1"gt; lt;pgt;"I take the bus to get to my part-time job. I need to know the intervals of my bus in case I miss the first one so I can give my co-workers a heads up I might be running a few minutes behind."lt;/pgt; lt;div class="user-needs"gt; lt;pgt;Goalslt;/pgt; lt;ulgt; lt;ligt;Being able to see what time the desired bus is arriving at, as well as what time the next bus is arriving.lt;/ligt; lt;ligt;Being able to see sudden changes in the bus schedulelt;/ligt; lt;/ulgt; lt;/divgt; lt;div class="user-needs"gt; lt;pgt;Frustrationslt;/pgt; lt;ulgt; lt;ligt;Delayed buses causes delay in getting to worklt;/ligt; lt;ligt;Desired bus that is arriving is labeled "Out of Service", therefore rider has to wait for another buslt;/ligt; lt;ligt;Not knowing if multiple buses run through the desired destination.lt;/ligt; lt;ligt;Hard to keep track of changes for a filelt;/ligt; lt;/ulgt; lt;/divgt; lt;/articlegt; lt;/sectiongt; lt;section class="canopy-text-block"gt; lt;h6gt;User Storieslt;/h6gt; lt;p id ="canopy-body-text"gt;Before the design started it was important to create user stories and highlight the important tasks to create a prodcut that would be viable. A list of user stories were created with the high priorty tasks being the main focus for the first iteration.lt;/pgt; lt;/sectiongt; lt;section class="client-features"gt; lt;articlegt; lt;h5gt;High Priority Tasks For A BusyBus New Userlt;/h5gt; lt;ulgt; lt;ligt;As a new user, I want to see all bus routes at a specific bus stop.lt;/ligt; lt;ligt;As a new user, I want to find out what time my bus will be arriving.lt;/ligt; lt;ligt;As a new user, I want to be notified of any alerts/delays on my bus route.lt;/ligt; lt;ligt;As a new user, I want to see a map of the bus routes.lt;/ligt; lt;/ulgt; lt;/articlegt; lt;/sectiongt; lt;section class="results-button"gt; lt;a class="click-through-button" href="canopy.html"gt;lt;buttongt;View User Storieslt;/buttongt;lt;/agt; lt;/sectiongt; lt;section class="canopy-process-section"gt; lt;h2gt;Prototyping for BusyBuslt;/h2gt; lt;h6gt;03 Information Architecturelt;/h6gt; lt;p id ="canopy-body-text"gt;Before the actual designing started, it was important to create a paper prototype of the app with features that would allow users to complete the high priority tasks. The results from this user test will be used to help build out the actual app.lt;/pgt; lt;/sectiongt; lt;section class="bus-sketch-screens"gt; lt;articlegt; lt;img id="bussketch1" src="images/bus-sketch1.png" alt="bus_sketch"gt; lt;/articlegt; lt;articlegt; lt;img id="bussketch1" src="images/bus-sketch1.png" alt="bus_sketch"gt; lt;/articlegt; lt;articlegt; lt;img id="bussketch1" src="images/bus-sketch1.png" alt="bus_sketch"gt; lt;/articlegt; lt;/sectiongt; lt;section class="canopy-text-block"gt; lt;h6gt;Usability Testlt;/h6gt; lt;p id ="canopy-body-text"gt;The task for this usability test with the paper prototype was for the user to find out when the N4 bus was arriving at the Washington amp; State stop. The 3 users were able to do so by clicking on the Washington amp; State stop under "nearby stops," and were able to navigate to the next screen showing all 7 bus lines.lt;/pgt; lt;/sectiongt; lt;section class="canopy-text-block"gt; lt;h6gt;Key Findings From Usability Testlt;/h6gt; lt;p id="canopy-body-text"gt;Users wanted to know what was the purpose of the "sort by" field next to near by stops. They wanted to know what was being sorted. Ideally in a second round of testing, this feature would be tested to see if it adds any value for the user.lt;/pgt; lt;/sectiongt; lt;section class="busy-sketch-screens"gt; lt;articlegt; lt;img id="bussketch1" src="images/sortby.png" alt="sortby_sketch_1"gt; lt;/articlegt; lt;/sectiongt; lt;section class="canopy-text-block"gt; lt;p id ="canopy-body-text"gt;Users were not sure what was meant by "Washington amp; State." It was not clear to users that it was a bus stop and not a bus line.lt;/pgt; lt;/sectiongt; lt;section class="busy-sketch-screens"gt; lt;articlegt; lt;img id="bussketch1" src="images/bus_stop.png" alt="sortby_sketch_1"gt; lt;/articlegt; lt;/sectiongt; lt;section class="canopy-text-block"gt; lt;p id ="canopy-body-text"gt;Under the favorite stops section it currently shows the bus stop name rather than the bus number. In the next iteration this will be changed to show the bus line number that users frequent the most to make that information compatible with the bus arrival time that is listed.lt;/pgt; lt;/sectiongt; lt;section class="busy-sketch-screens"gt; lt;articlegt; lt;img id="bussketch1" src="images/bus_stop_b.png" alt="sortby_sketch_1"gt; lt;/articlegt; lt;/sectiongt; lt;section class="canopy-text-block"gt; lt;p id ="canopy-body-text"gt;Users were confused by what the "up and down" arrows meant. This was meant to change the direction of where the buses were headed, for example "inbound" vs. "outbound". However this is feature confused users and will be removed and not included in the final design.lt;/pgt; lt;/sectiongt; lt;section class="busy-sketch-screens"gt; lt;articlegt; lt;img id="bussketch1" src="images/bus_arrow.png" alt="sortby_sketch_1"gt; lt;/articlegt; lt;/sectiongt; lt;section class="canopy-text-block"gt; lt;p id ="canopy-body-text"gt;With the results from the usability test, the next step is to design the screen that users will use to determine what time their bus is arriving. lt;/pgt; lt;/sectiongt; lt;section class="results-button"gt; lt;a class="click-through-button" href="canopy.html"gt;lt;buttongt;View Marvel Prototypelt;/buttongt;lt;/agt; lt;/sectiongt; lt;section class="canopy-process-section"gt; lt;h2gt;Branding amp; Identitylt;/h2gt; lt;h6gt;04 Colorslt;/h6gt; lt;p id ="canopy-body-text"gt;To convey a feeling of trust and reliability for BusyBus, the main color that will be used is blue. Users expect accuracy and dependability when they use the public transit app to plan their trip, and blue can help get this message across. Grey colors will be used for the text.lt;/pgt; lt;/sectiongt; lt;section class="cloud-uses-title"gt; lt;h4gt;Primary Brand Colors for BusyBuslt;/h4gt; lt;/sectiongt; lt;section class="cloud-usage-colors"gt; lt;article class="cloud-uses-pics"gt; lt;img id="use-pic" src="images/busy_color1.png" alt="busybus_color"gt; lt;p id="use-text"gt;Main Colorlt;brgt;HEX # 2A56C6lt;brgt;RGB 42/ 86/ 198lt;/pgt; lt;/articlegt; lt;article class="cloud-uses-pics"gt; lt;img id="use-pic" src="images/busy_color2.png" alt="content"gt; lt;p id="use-text"gt;Main Colorlt;brgt;HEX # 4D4D4Dlt;brgt;RGB 77/ 77/ 77lt;/pgt; lt;/articlegt; lt;article class="cloud-uses-pics"gt; lt;img id="use-pic" src="images/busy_color3.png" alt="share"gt; lt;p id ="use-text"gt;Main Colorlt;brgt;HEX # 8B8A93lt;brgt;RGB 139/ 138/ 147lt;/pgt; lt;/articlegt; lt;article class="cloud-uses-pics"gt; lt;img id="use-pic" src="images/busy_color4.png" alt="share"gt; lt;p id="use-text"gt;Alert Colorlt;brgt;HEX # E46B75lt;brgt;RGB 228/ 107/ 117lt;/pgt; lt;/articlegt; lt;/sectiongt; lt;section class="canopy-text-block"gt; lt;p id="canopy-body-text"gt;Red is used as an alert color to signal to users any unexpected changes that may occur regarding the bus schedule.lt;/pgt; lt;/sectiongt; lt;section class="canopy-text-block"gt; lt;h6gt;Typographylt;/h6gt; lt;p id="canopy-body-text"gt;Roboto was chosen as a typeface for the BusyBus app. This version of BusyBus is designed for Android and Roboto is a simple typeface developed for Android systems. The basic and clean look of Roboto helps deliver the bus information to the user in a straightforward manner.lt;/pgt; lt;/sectiongt; lt;section class="canopy-process-section"gt; lt;h2gt;05 Visual Designlt;/h2gt; lt;h6gt;High Fidelity Mock Upslt;/h6gt; lt;p id ="canopy-body-text"gt;With wireframes in place and a defined brand identity, I went on to develop the high fidelity mockups of BusyBus. The screen that will be mock up is the screen where users will see what bus is arriving and the time it will arrive. The following are screens of the design progression.lt;/pgt; lt;/sectiongt; lt;section class="bus-hifi-screens"gt; lt;article class="bus-uses-pics"gt; lt;h5gt;First Iterationlt;/h5gt; lt;img id="bus-design-pic" src="images/bus-design-1.png" alt="busybus_screen"gt; lt;p id="use-text"gt;There is not enough distinction between the bus number and desitination. There needs to be more hierarchylt;/pgt; lt;/articlegt; lt;article class="bus-uses-pics"gt; lt;h5gt;Second Iterationlt;/h5gt; lt;img id="bus-design-pic" src="images/bus-design-2.png" alt="busybus_screen"gt; lt;p id="use-text"gt;Distinction between the bus number and destination is clearer, but there is still opportunity to improve on the type of information being displayed.lt;/pgt; lt;/articlegt; lt;article class="bus-uses-pics"gt; lt;h5gt;Third Iterationlt;/h5gt; lt;img id="bus-design-pic" src="images/bus-design-3.png" alt="busybus_screen"gt; lt;p id ="use-text"gt;There is a clear distinction between bus number and destination. The alert info is being displayed to the bus rider as well.lt;/pgt; lt;/articlegt; lt;/sectiongt; lt;section class="results-button"gt; lt;a class="click-through-button" href="canopy.html"gt;lt;buttongt;View Final Prototypelt;/buttongt;lt;/agt; lt;/sectiongt; lt;section class="canopy-process-section"gt; lt;h2gt;Coding the BusyBus Screenlt;/h2gt; lt;h6gt;Using HTML amp; CSSlt;/h6gt; lt;p id="canopy-body-text"gt;To further move this prototype along, the next step was to translate the design into code. The overall structure of this code is written semantically to allow for organization and clarity when going through the code. lt;bgt;There are 3 sections for this screen: the header, the bus list, and the bottom navigation bar. The main component showing the arrival time of the buses was coded using list items.lt;/bgt;lt;/pgt; lt;/sectiongt; lt;section class="canopy-process-section"gt; lt;h2gt;Next Steps for BusyBuslt;/h2gt; lt;h6gt;Moving Forwardlt;/h6gt; lt;p id="canopy-body-text"gt;Some things to consider next is incorporating a map somewhere on the solution screen because this was a high priority tasks that was missed in the process. In addition, even though the solution screen has an established hierarchy, that can still be pushed further. For example, having a clearer distinction between buses that are in service versus out of service. This could be done by completely highlighting the out of service buses section in a muted color to indicate that they are not running.lt;/pgt; lt;p id="canopy-body-text"gt;Further steps would be to test how users prefer the bus time to show up on the app. Would users prefer to see the actual arrival time of the bus such as "11:25 am", or would they prefer to see it as what it is currently, in time intervals such as the bus is arriving in "5 min, 20 min".lt;/pgt; lt;p id="canopy-body-text"gt;These are a few things to consider as the project continues to develop and more users needs come to light through additional rounds of user testing.lt;/pgt; lt;/sectiongt; lt;section class="canopy-thankyou"gt; lt;p id="canopy-thanks"gt;Thank you for stopping by!lt;/pgt; lt;/sectiongt; lt;section class="canopy-smile"gt; lt;img id="canopy-color-tag2" src="images/canopy-smiley.svg" alt="canopy_user_test_pic"gt; lt;/sectiongt; lt;section class="results-button"gt; lt;a class="click-through-button" href="canopy.html"gt;lt;buttongt;Next Projectlt;/buttongt;lt;/agt; lt;/sectiongt; lt;!--- lt;articlegt; lt;p id="next-project"gt;Next Projectlt;/pgt; lt;a href="index.html"gt;lt;img id ="next-arrow" src="images/next-arrow.svg" alt="next_arrow"gt;lt;/agt; lt;/articlegt;---gt; lt;!---Footer Section---gt; lt;footergt; lt;h3gt;Let's connect and work together!lt;/h3gt; lt;ul class="socials"gt; lt;ligt;lt;a href="#"gt;lt;img id="social_icons" src="images/gmail.svg" alt="gmail"gt;lt;/agt;lt;/ligt; lt;ligt;lt;a href="#"gt;lt;img id="social_icons" src="images/linkedin.svg" alt="linkedin"gt;lt;/agt;lt;/ligt; lt;ligt;lt;a href="#"gt;lt;img id="social_icons" src="images/instagram.svg" alt="instagram"gt;lt;/agt;lt;/ligt; lt;ligt;lt;a href="#"gt;lt;img id="social_icons" src="images/github.svg" alt="instagram"gt;lt;/agt;lt;/ligt; lt;/ulgt; lt;p id="copyright"gt;Copyright 2020 Designed amp; Developed by Lily Wult;/pgt; lt;/footergt; lt;/divgt; lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"gt;lt;/scriptgt; lt;script src="chartinfo.js"gt;lt;/scriptgt; lt;/bodygt; lt;/htmlgt; Комментарии:
1. Пожалуйста, отредактируйте вопрос, чтобы ограничить его конкретной проблемой с достаточной детализацией для определения адекватного ответа.
Ответ №1:
Попробуйте Использовать :
new Chart(document.getElementById("pieChart"), { type: 'pie', data: { labels: ["Green", "Blue", "Gray", "Purple", "Yellow", "Red", "Black"], datasets: [{ backgroundColor: ["your color list"], data: [12, 19, 3, 17, 28, 24, 7] }] } }); Комментарии:
1. хммм попробовал, но, к сожалению, это не сработало