+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Pie Chart with Custom Tooltips</title>
- <script src="../Chart.js"></script>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-
- <style>
- #canvas-holder {
- width: 100%;
- margin-top: 50px;
- text-align: center;
- }
- #chartjs-tooltip {
- opacity: 1;
- position: absolute;
- background: rgba(0, 0, 0, .7);
- color: white;
- padding: 3px;
- border-radius: 3px;
- -webkit-transition: all .1s ease;
- transition: all .1s ease;
- pointer-events: none;
- -webkit-transform: translate(-50%, 0);
- transform: translate(-50%, 0);
- }
- #chartjs-tooltip.below {
- -webkit-transform: translate(-50%, 0);
- transform: translate(-50%, 0);
- }
- #chartjs-tooltip.below:before {
- border: solid;
- border-color: #111 transparent;
- border-color: rgba(0, 0, 0, .8) transparent;
- border-width: 0 8px 8px 8px;
- bottom: 1em;
- content: "";
- display: block;
- left: 50%;
- position: absolute;
- z-index: 99;
- -webkit-transform: translate(-50%, -100%);
- transform: translate(-50%, -100%);
- }
- #chartjs-tooltip.above {
- -webkit-transform: translate(-50%, -100%);
- transform: translate(-50%, -100%);
- }
- #chartjs-tooltip.above:before {
- border: solid;
- border-color: #111 transparent;
- border-color: rgba(0, 0, 0, .8) transparent;
- border-width: 8px 8px 0 8px;
- bottom: 1em;
- content: "";
- display: block;
- left: 50%;
- top: 100%;
- position: absolute;
- z-index: 99;
- -webkit-transform: translate(-50%, 0);
- transform: translate(-50%, 0);
- }
- </style>
-</head>
-
-<body>
- <div id="canvas-holder">
- <canvas id="chart-area1" width="50" height="50" />
- </div>
- <div id="canvas-holder">
- <canvas id="chart-area2" width="300" height="300" />
- </div>
-
- <div id="chartjs-tooltip"></div>
-
-
- <script>
- Chart.defaults.global.customTooltips = function(tooltip) {
-
- // Tooltip Element
- var tooltipEl = $('#chartjs-tooltip');
-
- // Hide if no tooltip
- if (!tooltip) {
- tooltipEl.css({
- opacity: 0
- });
- return;
- }
-
- // Set caret Position
- tooltipEl.removeClass('above below');
- tooltipEl.addClass(tooltip.yAlign);
-
- // Set Text
- tooltipEl.html(tooltip.text);
-
- // Find Y Location on page
- var top;
- if (tooltip.yAlign == 'above') {
- top = tooltip.y - tooltip.caretHeight - tooltip.caretPadding;
- } else {
- top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding;
- }
-
- // Display, position, and set styles for font
- tooltipEl.css({
- opacity: 1,
- left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
- top: tooltip.chart.canvas.offsetTop + top + 'px',
- fontFamily: tooltip.fontFamily,
- fontSize: tooltip.fontSize,
- fontStyle: tooltip.fontStyle,
- });
- };
-
- var pieData = [{
- value: 300,
- color: "#F7464A",
- highlight: "#FF5A5E",
- label: "Red"
- }, {
- value: 50,
- color: "#46BFBD",
- highlight: "#5AD3D1",
- label: "Green"
- }, {
- value: 100,
- color: "#FDB45C",
- highlight: "#FFC870",
- label: "Yellow"
- }, {
- value: 40,
- color: "#949FB1",
- highlight: "#A8B3C5",
- label: "Grey"
- }, {
- value: 120,
- color: "#4D5360",
- highlight: "#616774",
- label: "Dark Grey"
- }];
-
- window.onload = function() {
- var ctx1 = document.getElementById("chart-area1").getContext("2d");
- window.myPie = new Chart(ctx1).Pie({
- data: pieData
- });
-
- var ctx2 = document.getElementById("chart-area2").getContext("2d");
- window.myPie = new Chart(ctx2).Pie({
- data: pieData
- });
- };
- </script>
-</body>
-
-</html>
projects / thirdparty / Chart.js.git / commitdiff
