我已经使用chart.js 1.0，并且我的甜甜圈图表工具提示根据数据除以数据集显示百分比，但是我无法使用图表2.0进行复制。
我搜索过很多，还没有找到有效的解决方案。 我知道它将进入选项，但是我尝试过的一切都使饼功能失调。
<html>
<head>
<title>Doughnut Chart</title>
<script src="../dist/Chart.bundle.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div id="canvas-holder" style="width:75%">
<canvas id="chart-area" />
</div>
<script>
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};
var randomColorFactor = function() {
return Math.round(Math.random() * 255);
};
var randomColor = function(opacity) {
return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
};
var config = {
type: 'doughnut',
data: {
datasets: [{
data: [
486.5,
501.5,
139.3,
162,
263.7,
],
backgroundColor: [
"#F7464A",
"#46BFBD",
"#FDB45C",
"#949FB1",
"#4D5360",
],
label: 'Expenditures'
}],
labels: [
"Hospitals: $486.5 billion",
"Physicians & Professional Services: $501.5 billion",
"Long Term Care: $139.3 billion",
"Prescription Drugs: $162 billion",
"Other Expenditures: $263.7 billion"
]
},
options: {
responsive: true,
legend: {
position: 'bottom',
},
title: {
display: false,
text: 'Chart.js Doughnut Chart'
},
animation: {
animateScale: true,
animateRotate: true
}
}
};
window.onload = function() {
var ctx = document.getElementById("chart-area").getContext("2d");
window.myDoughnut = new Chart(ctx, config);{
}
};
</script>
</body>
</html>
当我通过options.scales.xAxes.time.tooltipFormat将鼠标悬停在折线图上的数据点上时，可以设置工具提示的格式，但是对于x轴刻度标签，我似乎无法做到这一点。 我的data.labels是一个矩对象数组。 它们显示为"MMM DD, YYYY"（例如2012年2月23日），但我想删除年份。
我正在尝试使用Chart.js创建具有两个数据集的折线图，每个数据集都有自己的Y比例尺/轴（一个在图表的左侧，一个在图表的右侧）。
这是我的代码（jsfiddle）：
var canvas = document.getElementById('chart');
new Chart(canvas, {
type: 'line',
data: {
labels: [ '1', '2', '3', '4', '5' ],
datasets: [
{
label: 'A',
yAxesGroup: 'A',
data: [ 100, 96, 84, 76, 69 ]
},
{
label: 'B',
yAxesGroup: 'B',
data: [ 1, 1, 1, 1, 0 ]
}
]
},
options: {
yAxes: [
{
name: 'A',
type: 'linear',
position: 'left',
scalePositionLeft: true
},
{
name: 'B',
type: 'linear',
position: 'right',
scalePositionLeft: false,
min: 0,
max: 1
}
]
}
});
但是，第二个轴不可见，并且第二个数据集仍与第一个数据集完全一样缩放（0到100，而不是0到1）。 我需要更改什么？
我在这里查看了各种文档和类似的问题，但似乎找不到特定的解决方案。 如果我错过任何明显的事情或重复了这个问题，我们深表歉意！
作为一些背景信息，我使用Chart.js插件实现了4个图形，并使用PHP从数据库中传递了所需的数据。 这一切都正常工作并且很好。
我的问题是我需要将工具提示中的数据也显示为格式化数据。 以％表示。 例如，我来自数据库的数据之一是-0.17222。 我已经将其格式化为要显示在表格中的百分比，一切都很好。 但是，在为chart.js条形图设置数据时，数据显然缺少此格式并显示为-0.17222，这是我不想要的。
抱歉，我想发布图片，但是我的声誉太垃圾了！
我从数据库中获取数据，然后放入表中：
var kpiRex = new Handsontable(example1, {
data: getRexData(),
然后在图表部分中像这样输入这些数据：
data: kpiRex.getDataAtRow(3)
任何帮助都会很棒！ 我已经坚持了几个小时，这可能是我忽略的一个非常简单的事情。
我正在使用此库在Web应用程序中绘制图表。 问题是我的y轴上有小数点。 您可以在下图中看到
有什么办法可以限制它只包含数字吗？
这是我的代码
var matches = $("#matches").get(0).getContext("2d");
var data = {
labels: labelsFromCurrentDateTillLastWeek,
datasets: [
{
label: "Last Weeks Matches",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: result
}
]
};
var options = {
scaleLabel: function (label) {
return Math.round(label.value);
}
};
var myLineChart = new Chart(matches, {
type: 'bar',
data: data,
options: options
})
我想问问是否可以使用Chart.js [http://www.chartjs.org/]来获取组合条形图和折线图？
感谢您的任何建议。
Chart.js（文档）是否具有用于数据集的选项，用于设置图表的名称（标题）（例如，我所在城市的温度），x轴的名称（例如，天）和y轴的名称（例如，温度）。 还是我应该用CSS解决这个问题？
var lineChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.2)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data : [data]
}
]
}
非常感谢您的帮助。
我正在使用Chartjs来显示图表，并且需要设置y轴的标题，但是在文档中没有关于它的信息。
我需要像在图片上那样在y轴上设置y轴，或者在y轴的顶部设置y轴，以便有人现在可以使用该参数
我看过官方网站，但没有任何信息
我见过其他支持分组条形图的javascript图表库，如下图所示。 我没有在chart.js在线编辑器中将其视为显式选项。
是否可以在chart.js中进行这种分组的条形图？ 这简单吗？ 他们的在线编辑器中有模板吗？
我有一个要使用Chart.js包含在我的网站中的图表。 在Y轴上，它为我提供了实数而不是整数。 如何将数字更改为整数？
这是我现在所拥有的照片：
这是代码：
var lineChartData = {
labels : ["2013/04/01","2013/03/31", "2013/03/30", "2013/03/29", "2013/03/28","2013/03/27", "2013/03/26"],
datasets : [
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : ["0", "2","1", "0", "1","0","1"]
}
]
}
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(lineChartData);
如何隐藏chart.js中显示的x轴标签/文本？
设置scaleShowLabels:false仅删除y轴标签。
<script>
var options = {
scaleFontColor: "#fa0",
datasetStrokeWidth: 1,
scaleShowLabels : false,
animation : false,
bezierCurve : true,
scaleStartValue: 0,
};
var lineChartData = {
labels : ["1","2","3","4","5","6","7"],
datasets : [
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [1,3,0,0,6,2,10]
}
]
}
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData,options);
</script>
我正在尝试文档中提供的Chart.js示例代码。
宽度和高度在画布元素上以400px / 400px内联指定。
但是，在绘制图表时，它会被放大到整个页面宽度，并切断最右端。
看例子
我应该如何/在哪里控制图表的宽度/高度？
This is some bogus text because SO prohibits linking to Codepen otherwise.
我对Chart.js有疑问。
我使用提供的文档绘制了多个饼图。 我想知道是否可以通过单击其中一个图表的某个切片来根据该切片的值进行ajax调用？
例如，如果这是我的Red
var data = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}
],
我是否可以单击Red标记为slice的文件并调用以下形式的url：example.com?label=red&value=300？ 如果是，我该如何处理？
我正在使用Charts.js在我的网站上显示图表。 当前，标签显示为一长串数字（即123456）。我希望它显示为带有千位分隔符的货币：（即$ 123,456）
我正在使用scaleLabel选项将$ USD符号放在值之前：
scaleLabel: "<%= ' $' + Number(value)%>"
以及插入逗号分隔符的函数：
function(label){return label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");}
我只是不知道如何一起使用这些来获得我想要的东西。
这是小提琴：[http://jsfiddle.net/vy0yhd6m/79/]
（请记住，当前只有在删除上述两个JavaScript之一的情况下该图才起作用）
感谢您提供的所有帮助。
如何使用Chart.js在x轴上的特定点绘制一条垂直线？
特别是，我想在LineChart上画一条线以指示当天。 这是图表的模型：[http://i.stack.imgur.com/VQDWR.png]
我正在尝试获取Charts.js以显示工具提示中每个数据集的标签名称。
我的代码：
var barChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
label: "Bob",
fillColor : "rgba(88,196,246,0.5)",
strokeColor : "rgba(88,196,246,0.8)",
highlightFill: "rgba(88,196,246,0.75)",
highlightStroke: "rgba(88,196,246,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
},
{
label: "Tina",
fillColor : "rgba(74,211,97,0.5)",
strokeColor : "rgba(74,211,97,0.8)",
highlightFill : "rgba(74,211,97,0.75)",
highlightStroke : "rgba(74,211,97,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
]
}
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).Line(barChartData, {
responsive : true,
animation: true,
barValueSpacing : 5,
barDatasetSpacing : 1,
tooltipFillColor: "rgba(0,0,0,0.8)",
multiTooltipTemplate: "<%= label %> - <%= value %>"
});
使用我上面的代码，将鼠标悬停在“一月”上方时会显示工具提示：
January
January - xx
January - xx
有什么想法可以让我显示以下内容吗？
January
Bob - xx
Tina - xx
chart.js的文档提到了“传奇模板”，但没有提供资源或此类图例的示例。 如何显示这些？
.removeData( )的API允许编辑加载到其中的数据集的点，例如：
.removeData( )在您的Chart实例上调用update（）将使用 任何更新的值，使您可以编辑多个值 现有点，然后在一个动画渲染循环中渲染这些点。
.removeData( )在Chart实例上调用addData（valuesArray，label）并传递一个 每个数据集的值数组，以及这些点的标签。
.removeData( )在您的Chart实例上调用removeData（）将删除第一个 图表上所有数据集的值。
所有这些都很棒，但是我无法弄清楚如何加载一个全新的数据集，从而清除掉旧数据集。 该文档似乎没有涵盖此内容。
我想问一下是否可以使用Chart.js显示数据值？我想打印图表。
感谢您的任何建议。