首页 文章

如何1.传递两个数据集和2.在Chartjs中的图表上有永久标签

提问于
浏览 次
0

任何以前使用过chart.js库的人，请你告诉我：

  • 如果可以将两个数据集传递给饼图/圆环图表对象（如下所示：

var Piechart=new Chart(ctx).Pie(data1,data2,options);

不像我们只传递一个的普通电话，如下：

var Piechart=new Chart(ctx).Pie(data,options);

实现如图所示的饼图 .

  • 此外，图形值应永久显示在图表的切片上（而不是鼠标悬停并显示工具提示图标）

enter image description here

jquery chart.js

1 回答

  • 1

    您可能还希望考虑名为chartNew.js的chart.js fork .

    chartNew.js是chart.js的1.0版本的一个分支，但它们保留了1.0格式（保持一切向后兼容，坦率地说，更简单）但是它们添加了许多新功能（其中许多现在包含在图表中） .js版本2） .

    此外，chartNew.js开发团队非常敏感，并且经常会很快响应new posted issues（即请求帮助） .

    有一些优秀的样品解决方案here

    以下是chartNew.js代码的示例：

    var mydata1 = {
	labels : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
	datasets : [
		{
			fillColor : "rgba(151,187,205,0)",
			strokeColor : "rgba(220,220,220,1)",
			pointColor : "rgba(220,220,220,1)",
			pointStrokeColor : "#fff",
			data : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
		},
	]
}
var mydata2 = {
	labels : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
	datasets : [
		{
			fillColor : "rgba(151,187,205,0)",
			strokeColor : "rgba(220,220,220,1)",
			pointColor : "rgba(220,220,220,1)",
			pointStrokeColor : "#fff",
			data : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
		},
	]
}

        
var setopts = {
    animation : false
}

var myLine1 = new Chart(document.getElementById("canvas_1").getContext("2d")).Line(mydata1,setopts);

var myLine2 = new Chart(document.getElementById("canvas_2").getContext("2d")).Line(mydata2,setopts);

    <SCRIPT src='https://rawgit.com/FVANCOP/ChartNew.js/master/ChartNew.js'></script>
<!-- <SCRIPT src='https://rawgit.com/nnnick/Chart.js/master/Chart.js'></script> -->

<canvas id="canvas_1" height="200" width="450"></canvas>
<canvas id="canvas_2" height="200" width="450"></canvas>

    还有几个jsFiddle演示：

    Above example

    Example Two

    https://stackoverflow.com/questions/34056752/chartnew-js-update-corresponding-data-point-in-second-chart

    回复于

相关问题