ChartJS -每个数据点的颜色不同

xuo3flqw  于 2023-03-12  发布在  Chart.js
关注(0)|答案(7)|浏览(263)

有没有办法在折线图中的数据点超过某个值时设置不同的颜色?
我找到了dxChart的这个例子-https://stackoverflow.com/a/24928967/949195-现在我想为ChartJS找一些类似的例子

dy1byipe

dy1byipe1#

在更新到ChartJS 2.2.2版本时,我发现接受的答案不再有效。数据集将使用一个数组保存属性的样式信息。在本例中:

  1. var pointBackgroundColors = [];
  2. var myChart = new Chart($('#myChart').get(0).getContext('2d'), {
  3. type: 'line',
  4. data: {
  5. datasets: [
  6. {
  7. data: dataPoints,
  8. pointBackgroundColor: pointBackgroundColors
  9. }
  10. ]
  11. }
  12. });
  13. for (i = 0; i < myChart.data.datasets[0].data.length; i++) {
  14. if (myChart.data.datasets[0].data[i] > 100) {
  15. pointBackgroundColors.push("#90cd8a");
  16. } else {
  17. pointBackgroundColors.push("#f58368");
  18. }
  19. }
  20. myChart.update();

我在查看ChartJS的示例时发现了这一点,特别是以下示例:"Different Point Sizes Example"

展开查看全部
9njqaruj

9njqaruj2#

对于chart.js的最新版本,我建议使用scriptable options执行此操作。
脚本选项为您提供了一个简单的方法,根据您提供的函数动态地改变数据集属性的样式(例如线点颜色)。您的函数被传递了一个“context”对象,该对象告诉它点的索引和值 * 等 *(见下文)。
大多数图表属性都可以编写脚本;每个图表类型的数据集属性告诉你确切的列表(e.g. 见这里的折线图)。
以下是在折线图上使用脚本选项的方法(基于文档中的示例)。在此图表上,负数据点显示为红色,正数据点显示为蓝/绿色交替:

  1. window.myChart = Chart.Line(ctx, {
  2. data: {
  3. labels: x_data,
  4. datasets: [
  5. {
  6. data: y_data,
  7. label: "Test Data",
  8. borderColor: "#3e95cd",
  9. fill: false,
  10. pointBackgroundColor: function(context) {
  11. var index = context.dataIndex;
  12. var value = context.dataset.data[index];
  13. return value < 0 ? 'red' : // draw negative values in red
  14. index % 2 ? 'blue' : // else, alternate values in blue and green
  15. 'green';
  16. }
  17. }
  18. ],
  19. }
  20. });

传递给你的函数的context对象可以有以下属性。其中一些属性对于某些类型的实体是不存在的,所以在使用前要进行测试。

    • 图表 *:关联的图表
    • 数据索引 *:当前数据的索引
    • 数据集 *:索引处的数据集datasetIndex
    • 数据集索引 *:当前数据集的索引
  • hover:如果悬停则为true
展开查看全部
o4hqfura

o4hqfura3#

下面是我的工作(v 2.7.0),首先我必须设置数据集中的pointBackgroundColor和pointBorderColor到一个数组(如果你想,你可以在第一个地方用颜色填充这个数组):

  1. var myChart = new Chart(ctx, {
  2. type: 'line',
  3. data: {
  4. datasets: [
  5. {
  6. data: dataPoints,
  7. pointBackgroundColor: [],
  8. pointBorderColor: [],
  9. }
  10. ]
  11. }
  12. });

然后你可以直接改变点的颜色:

  1. myChart.data.datasets[0].pointBackgroundColor[4] = "#cc00cc";
  2. myChart.data.datasets[0].pointBorderColor[4] = "#cc0000";
  3. myChart.update();

一些其他特性可用于区分点:pointStrokeColor(它显然存在,但我似乎无法让它工作)、pointRadius和pointHoverRadius(整数)、pointStyle(“三角形”、“矩形”、“矩形旋转”、"十字“、”十字旋转“、”星形“、”线条“和”虚线“),尽管我似乎无法弄清楚pointRadius和pointStyle的默认值。

展开查看全部
iovurdzv

iovurdzv4#

For chartjs 2.0 see this following answer.
原始答案如下。
关于ChartJS的好问题。我一直想做一个类似的事情。即动态地改变点的颜色为不同的颜色。你有没有尝试过下面这个。我刚刚尝试过,它为我工作。
试试这个:

  1. myLineChart.datasets[0].points[4].fillColor = "rgba(000,111,111,55)" ;

或者试试这个:

  1. myLineChart.datasets[0].points[4].fillColor = "#FF0000";

或者甚至是这样:

  1. myLineChart.datasets[0].points[4].fillColor = "lightgreen";

然后执行以下操作:

  1. myLineChart.update();

我猜你可能会有这样的东西

  1. if (myLineChart.datasets[0].points[4].value > 100) {
  2. myLineChart.datasets[0].points[4].fillColor = "lightgreen";
  3. myLineChart.update();
  4. }

不管怎样,给予一试吧。

展开查看全部
zour9fqk

zour9fqk5#

只是在新的2.0版本中添加了对我有效的内容。
取代:

  1. myLineChart.datasets[0].points[4].fillColor = "lightgreen";

我不得不用途:

  1. myChart.config.data.datasets[0].backgroundColor[4] = "lightgreen";

不确定这是因为2.0中的变化,还是因为我使用的是条形图而不是折线图。

wecizke3

wecizke36#

如果以这种方式初始化myChart,

  1. var myChart = new Chart(ctx, {
  2. type: 'line',
  3. data: {

你必须用这个代码改变线的颜色

  1. myChart.data.datasets[0].backgroundColor[0] ="#87CEFA";

如果以这种方式初始化myChart,

  1. myBar = new Chart(ctx).Line(barChartData, {

你必须用这个代码改变线的颜色

  1. myLineChart.datasets[0].points[4].fillColor = "#FF0000";
展开查看全部
smtd7mpg

smtd7mpg7#

大多数的方法对我来说太复杂了,所以这里是如何解决它:顺便说一句,我使用react,所以在data参数中我这样做
之前:

  1. datasets:[
  2. {
  3. label: 'Maximum Predicted Temperature',
  4. fill: false,
  5. lineTension: 0.5,
  6. backgroundColor: ['red'],
  7. borderColor: 'rgba(0,0,0,1)',
  8. borderWidth: 2,
  9. data: max
  10. },

之后:

  1. datasets:[
  2. {
  3. label: 'Maximum Predicted Temperature',
  4. fill: false,
  5. lineTension: 0.5,
  6. backgroundColor: ['red','blue','green','yellow','orange','purple','pink','brown','grey','black','white','violet'],
  7. borderColor: ['red','blue','green','yellow','orange','purple','pink','brown','grey','black','white','violet'],
  8. borderWidth: 2,
  9. data: max
  10. }

颜色将循环,如果您给定的数据点超过提供的颜色数量,红色将适用于每第12个数据点,它真的帮助了我,认为解决方案有点笨拙,但给出了更多的控制,希望这有帮助

展开查看全部

相关问题