ChartJS饼图上的标签中的自定义数据
[英]Custom data in label on ChartJS pie chart
问题描述
I'm using ChartJS to draw charts, and it works marvellously. 
我正在使用ChartJS绘制图表，它的工作非常出色。 The problem I have now is that the only thing I can use in label -property is the value , but I'm drawing a chart for investment allocation in funds, and when you hover over an allocation, you should see the data on the fund that investment allocation is in: 我现在遇到的问题是我在label -property中唯一可以使用的是value ，但是我正在绘制一个基金投资分配图表，当你将鼠标悬停在分配上时，你应该看到基金上的数据投资分配在：
- The fund name 基金名称
- The fund rating (value 1-5) 基金评级（价值1-5）
- The fund risk (value 1-7) 基金风险（价值1-7）
- Trend one year (percentage) 趋势一年（百分比）
- Trend since inception (percentage) 自成立以来的趋势（百分比）
I don't mind a workaround, but I was hoping to avoid to alter the ChartJS code or performing some kind of extension. 我不介意解决方法，但我希望避免改变ChartJS代码或执行某种扩展。 I just want to be able to have an HTML label or to connect an additional property to the supplied data point (ie I'd like to set a fundData -object along the value and label for the ChartJS data). 我只是希望能够有一个HTML标签，或额外的属性连接到提供的数据点（即我想设置一个fundData沿-object value和label的ChartJS数据）。
Is there any way to do this? 有没有办法做到这一点？
Thanks. 谢谢。
EDIT 编辑
Added a picture of what I'd like to achieve: 添加了我想要实现的图片：
1 个解决方案
解决方案1
3 已采纳 2015-09-22 01:57:11
I read a lot of issues from github ChartJs project and currently it's not possible. 我从github ChartJs项目中读到了很多问题，目前还不可能。
I don't know if snippet below will be useful workaround, but here goes: 我不知道下面的代码片段是否有用，但是这里有：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>chart test</title> <style> * { padding: 0; margin: 0; } #chart-tooltip { position: fixed; z-index: 999; background: #000000; padding: 2px; display: none; overflow: hidden; color: white; font-size: 10px; font-family: sans-serif; /*width and height is set by javascript*/ } #chart-tooltip p { text-align: center; } </style> </head> <body> <canvas id="myChart" width="300" height="300"></canvas> <!--custom tooltip container--> <div id="chart-tooltip"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> <script> var dataset = [ { value: 300, color:"#F7464A", highlight: "#FF5A5E", label: "Red", country: "Brazil", company: "PETROBRAS" }, { value: 50, color: "#46BFBD", highlight: "#5AD3D1", label: "Green", country: "USA", company: "GOOGLE" }, { value: 100, color: "#FDB45C", highlight: "#FFC870", label: "Yellow", country: "Japan", company: "TOYOTA" } ]; var canvasEl = $("#myChart"); var canvasContext = canvasEl.get(0).getContext("2d"); var myDoughnutChart = new Chart(canvasContext).Doughnut(dataset, { showTooltips: false }); canvasEl.on('mousemove',customTooltip); // on mouse out just remove tooltip of DOM... canvasEl.on('mouseout', function (event) { $("#chart-tooltip").css("display", "none"); }); /** * Custom tooltip to show when mousemove event is trigged * * @param {Object} event The mousemove event */ function customTooltip(event) { //globals, take care... var segmentData = myDoughnutChart.getSegmentsAtEvent(event), tooltipWidth = 160.0, tooltipHeight = 90.0, tooltipContainer = $("#chart-tooltip"); if (segmentData[0] == undefined) { return; } // CSS styles tooltipContainer.css({ width: tooltipWidth, height: tooltipHeight, display: "block", /* Set tooltip position is up to you... */ top: (event.clientY + (tooltipHeight/3)) + "px", left: (event.clientX - tooltipWidth/2) + "px" }); segmentData = segmentData[0]; var data = ( findEntryByLabelAndValue(segmentData.label, segmentData.value, dataset)); // Tooltip data var htmlContent = [ '<p><strong>Whatever</strong></p>', '<ul>', '<li> Label: ' + data.label + '</li>', '<li> Velue: ' + data.value + '</li>', '<li> Country: ' + data.country + '</li>', '<li> Company: ' + data.company + '</li>', '</ul>' ].join(''); // render... tooltipContainer.html(htmlContent); } /** * As long as myChart.getSegmentsAtEvent() does not return all keys from dataset, * we can search an specif dataset entry by "value" and "value" keys. * In fact, you could provide an unique ID so it would be a lot easier * to implement (findById(id, dataset)), because you could to search by ID, * instead of label/value keys together * * @param {string} label The dataset["label"] value * @param {*} value The dataset["value"] value * @param {Object} dataset The dataset to search in * * @returns {Object} Object or null (if not found data entry) */ function findEntryByLabelAndValue(label, value, dataset) { var key; for (key in dataset) { if (dataset[key].value == value && dataset[key].label == label) { return dataset[key]; } } return null; } </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.