有没有办法在折线图中的数据点超过某个值时设置不同的颜色?我找到了dxChart的这个例子-https://stackoverflow.com/a/24928967/949195-现在我想为ChartJS找一些类似的例子
dy1byipe1#
在更新到ChartJS 2.2.2版本时,我发现接受的答案不再有效。数据集将使用一个数组保存属性的样式信息。在本例中:
var pointBackgroundColors = [];var myChart = new Chart($('#myChart').get(0).getContext('2d'), { type: 'line', data: { datasets: [ { data: dataPoints, pointBackgroundColor: pointBackgroundColors } ] }});for (i = 0; i < myChart.data.datasets[0].data.length; i++) { if (myChart.data.datasets[0].data[i] > 100) { pointBackgroundColors.push("#90cd8a"); } else { pointBackgroundColors.push("#f58368"); }}myChart.update();
var pointBackgroundColors = [];
var myChart = new Chart($('#myChart').get(0).getContext('2d'), {
type: 'line',
data: {
datasets: [
{
data: dataPoints,
pointBackgroundColor: pointBackgroundColors
}
]
});
for (i = 0; i < myChart.data.datasets[0].data.length; i++) {
if (myChart.data.datasets[0].data[i] > 100) {
pointBackgroundColors.push("#90cd8a");
} else {
pointBackgroundColors.push("#f58368");
myChart.update();
我在查看ChartJS的示例时发现了这一点,特别是以下示例:"Different Point Sizes Example"
9njqaruj2#
对于chart.js的最新版本,我建议使用scriptable options执行此操作。脚本选项为您提供了一个简单的方法,根据您提供的函数动态地改变数据集属性的样式(例如线点颜色)。您的函数被传递了一个“context”对象,该对象告诉它点的索引和值 * 等 *(见下文)。大多数图表属性都可以编写脚本;每个图表类型的数据集属性告诉你确切的列表(e.g. 见这里的折线图)。以下是在折线图上使用脚本选项的方法(基于文档中的示例)。在此图表上,负数据点显示为红色,正数据点显示为蓝/绿色交替:
chart.js
window.myChart = Chart.Line(ctx, { data: { labels: x_data, datasets: [ { data: y_data, label: "Test Data", borderColor: "#3e95cd", fill: false, pointBackgroundColor: function(context) { var index = context.dataIndex; var value = context.dataset.data[index]; return value < 0 ? 'red' : // draw negative values in red index % 2 ? 'blue' : // else, alternate values in blue and green 'green'; } } ], }});
window.myChart = Chart.Line(ctx, {
labels: x_data,
data: y_data,
label: "Test Data",
borderColor: "#3e95cd",
fill: false,
pointBackgroundColor: function(context) {
var index = context.dataIndex;
var value = context.dataset.data[index];
return value < 0 ? 'red' : // draw negative values in red
index % 2 ? 'blue' : // else, alternate values in blue and green
'green';
],
传递给你的函数的context对象可以有以下属性。其中一些属性对于某些类型的实体是不存在的,所以在使用前要进行测试。
context
o4hqfura3#
下面是我的工作(v 2.7.0),首先我必须设置数据集中的pointBackgroundColor和pointBorderColor到一个数组(如果你想,你可以在第一个地方用颜色填充这个数组):
var myChart = new Chart(ctx, { type: 'line', data: { datasets: [ { data: dataPoints, pointBackgroundColor: [], pointBorderColor: [], } ] }});
var myChart = new Chart(ctx, {
pointBackgroundColor: [],
pointBorderColor: [],
然后你可以直接改变点的颜色:
myChart.data.datasets[0].pointBackgroundColor[4] = "#cc00cc"; myChart.data.datasets[0].pointBorderColor[4] = "#cc0000"; myChart.update();
myChart.data.datasets[0].pointBackgroundColor[4] = "#cc00cc";
myChart.data.datasets[0].pointBorderColor[4] = "#cc0000";
一些其他特性可用于区分点:pointStrokeColor(它显然存在,但我似乎无法让它工作)、pointRadius和pointHoverRadius(整数)、pointStyle(“三角形”、“矩形”、“矩形旋转”、"十字“、”十字旋转“、”星形“、”线条“和”虚线“),尽管我似乎无法弄清楚pointRadius和pointStyle的默认值。
iovurdzv4#
For chartjs 2.0 see this following answer.原始答案如下。关于ChartJS的好问题。我一直想做一个类似的事情。即动态地改变点的颜色为不同的颜色。你有没有尝试过下面这个。我刚刚尝试过,它为我工作。试试这个:
myLineChart.datasets[0].points[4].fillColor = "rgba(000,111,111,55)" ;
或者试试这个:
myLineChart.datasets[0].points[4].fillColor = "#FF0000";
或者甚至是这样:
myLineChart.datasets[0].points[4].fillColor = "lightgreen";
然后执行以下操作:
myLineChart.update();
我猜你可能会有这样的东西
if (myLineChart.datasets[0].points[4].value > 100) { myLineChart.datasets[0].points[4].fillColor = "lightgreen"; myLineChart.update(); }
if (myLineChart.datasets[0].points[4].value > 100) {
不管怎样,给予一试吧。
zour9fqk5#
只是在新的2.0版本中添加了对我有效的内容。取代:
我不得不用途:
myChart.config.data.datasets[0].backgroundColor[4] = "lightgreen";
不确定这是因为2.0中的变化,还是因为我使用的是条形图而不是折线图。
wecizke36#
如果以这种方式初始化myChart,
var myChart = new Chart(ctx, { type: 'line', data: {
你必须用这个代码改变线的颜色
myChart.data.datasets[0].backgroundColor[0] ="#87CEFA";
myBar = new Chart(ctx).Line(barChartData, {
smtd7mpg7#
大多数的方法对我来说太复杂了,所以这里是如何解决它:顺便说一句,我使用react,所以在data参数中我这样做之前:
datasets:[ { label: 'Maximum Predicted Temperature', fill: false, lineTension: 0.5, backgroundColor: ['red'], borderColor: 'rgba(0,0,0,1)', borderWidth: 2, data: max },
datasets:[
label: 'Maximum Predicted Temperature',
lineTension: 0.5,
backgroundColor: ['red'],
borderColor: 'rgba(0,0,0,1)',
borderWidth: 2,
data: max
},
之后:
datasets:[ { label: 'Maximum Predicted Temperature', fill: false, lineTension: 0.5, backgroundColor: ['red','blue','green','yellow','orange','purple','pink','brown','grey','black','white','violet'], borderColor: ['red','blue','green','yellow','orange','purple','pink','brown','grey','black','white','violet'], borderWidth: 2, data: max }
backgroundColor: ['red','blue','green','yellow','orange','purple','pink','brown','grey','black','white','violet'],
borderColor: ['red','blue','green','yellow','orange','purple','pink','brown','grey','black','white','violet'],
颜色将循环,如果您给定的数据点超过提供的颜色数量,红色将适用于每第12个数据点,它真的帮助了我,认为解决方案有点笨拙,但给出了更多的控制,希望这有帮助
7条答案
按热度按时间dy1byipe1#
在更新到ChartJS 2.2.2版本时,我发现接受的答案不再有效。数据集将使用一个数组保存属性的样式信息。在本例中:
我在查看ChartJS的示例时发现了这一点,特别是以下示例:"Different Point Sizes Example"
9njqaruj2#
对于
chart.js
的最新版本,我建议使用scriptable options执行此操作。脚本选项为您提供了一个简单的方法,根据您提供的函数动态地改变数据集属性的样式(例如线点颜色)。您的函数被传递了一个“context”对象,该对象告诉它点的索引和值 * 等 *(见下文)。
大多数图表属性都可以编写脚本;每个图表类型的数据集属性告诉你确切的列表(e.g. 见这里的折线图)。
以下是在折线图上使用脚本选项的方法(基于文档中的示例)。在此图表上,负数据点显示为红色,正数据点显示为蓝/绿色交替:
传递给你的函数的
context
对象可以有以下属性。其中一些属性对于某些类型的实体是不存在的,所以在使用前要进行测试。o4hqfura3#
下面是我的工作(v 2.7.0),首先我必须设置数据集中的pointBackgroundColor和pointBorderColor到一个数组(如果你想,你可以在第一个地方用颜色填充这个数组):
然后你可以直接改变点的颜色:
一些其他特性可用于区分点:pointStrokeColor(它显然存在,但我似乎无法让它工作)、pointRadius和pointHoverRadius(整数)、pointStyle(“三角形”、“矩形”、“矩形旋转”、"十字“、”十字旋转“、”星形“、”线条“和”虚线“),尽管我似乎无法弄清楚pointRadius和pointStyle的默认值。
iovurdzv4#
For chartjs 2.0 see this following answer.
原始答案如下。
关于ChartJS的好问题。我一直想做一个类似的事情。即动态地改变点的颜色为不同的颜色。你有没有尝试过下面这个。我刚刚尝试过,它为我工作。
试试这个:
或者试试这个:
或者甚至是这样:
然后执行以下操作:
我猜你可能会有这样的东西
不管怎样,给予一试吧。
zour9fqk5#
只是在新的2.0版本中添加了对我有效的内容。
取代:
我不得不用途:
不确定这是因为2.0中的变化,还是因为我使用的是条形图而不是折线图。
wecizke36#
如果以这种方式初始化myChart,
你必须用这个代码改变线的颜色
如果以这种方式初始化myChart,
你必须用这个代码改变线的颜色
smtd7mpg7#
大多数的方法对我来说太复杂了,所以这里是如何解决它:顺便说一句,我使用react,所以在data参数中我这样做
之前:
之后:
颜色将循环,如果您给定的数据点超过提供的颜色数量,红色将适用于每第12个数据点,它真的帮助了我,认为解决方案有点笨拙,但给出了更多的控制,希望这有帮助