Question

我使用javascript和charts.js创建了一个类似于http://jsfiddle.net/vrwjfg9z/2749/

的图表

这很棒但是当你将鼠标悬停在图表的一部分上时，我希望也能显示描述。就像在这个例子http://jsfiddle.net/vrwjfg9z/2750/

中一样

我似乎无法在没有一个人离开的情况下将两者结合起来

我认为它与代码的这一部分有关

var ctx = document.getElementById("doughnutChartCanvas").getContext("2d");
    new Chart(ctx).Doughnut(doughnutChartCanvas);
    var doughnutChartCanvas = new Chart(ctx).Doughnut(doughnutChartCanvas, options);
    document.getElementById('js-legend').innerHTML = doughnutChartCanvas.generateLegend();

Answer 1

您可以更改工具提示模板以显示标签和值。默认情况下，这是行为，因此要么从选项中删除工具提示，请将其更改为类似于代码段。

在第二个示例中，您创建了选项，但从未将其添加到图表中。这就是为什么你看到标签和价值。（默认看）

这意味着如果标签存在，则将标签：值设置为露营：20，如果标签不存在则只使用20.

<%if (label){%><%=label %>: <%}%><%= value + %>

＆＃13;

 jQuery(window).load( function() {
	var doughnutChartCanvas = [
		{
			value: 40,
			color:"#F7464A",
			label: "Camping"

		},
		{
			value : 50,
			color : "#46BFBD",
			label: "Tennis"
		},
		{
			value : 50,
			color : "#659D32",
			label: "Gaming"
		},
		{
			value : 110,
			color : "#FDB45C",
			label: "Reading"
		},
		{
			value : 90,
			color : "#949FB1",
			label: "Hiking"
		},
		{
			value : 70,
			color : "#4D5360",
			label: "Snowboarding"
		}
	];
	var options = {
    segmentShowStroke: false,
    animateRotate: true,
    animateScale: false,
    percentageInnerCutout: 50,
    tooltipTemplate: "<%if (label){%><%=label %>: <%}%><%= value %>"
}

	var ctx = document.getElementById("doughnutChartCanvas").getContext("2d");
	new Chart(ctx).Doughnut(doughnutChartCanvas);
	var doughnutChartCanvas = new Chart(ctx).Doughnut(doughnutChartCanvas, options);
	document.getElementById('js-legend').innerHTML = doughnutChartCanvas.generateLegend();
});

＆＃13;

.chart-legend li span{
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js"></script>
							<canvas class="chartjs" id="doughnutChartCanvas" width="300" height="300"></canvas>
                            <div id="js-legend" class="chart-legend"></div>

＆＃13;

charts.js不会显示图例和图表说明

1 个答案: