时间戳

首页 > 解决方案 > chart.js 标签颜色根据值变化

javascript - chart.js 标签颜色根据值变化

问题描述

我有一个chart.js 的水平图表，看起来像这样。我的条形图

我正在寻找一种方法来更改左侧“Boozman John、Eldridge Conner 等”的标签。基于我从 ajax 调用中获得的列表中的值。

我尝试过类似的东西

labels {
    fontColor: labelcolors
},

使用 for 循环获取列表“labelcolors”中的颜色但没有用。

这是我的代码

`var ctx = document.getElementById("GeneralChart");
var GeneralChart = new Chart(ctx, {
    type: "horizontalBar",
    data: {
  labels: gen_candidate,
  datasets: [
    {
      label: "Committee expenditure",
      backgroundColor: "orange",
      borderColor: "yellow",
      borderWidth: 1,
      xAxisID: "expenditure",
      data: gen_expenditure
    },
    {
      label: "General votes",
      backgroundColor: "green",
      borderColor: "green",
      borderWidth: 1,
      xAxisID: "votes",
      data: general_votes
    },
  ]
},
    options: {
    responsive: true,
    legend: {
        position: "top"
    },
    title: {
        display: true,
        text: "Money and Votes for General Election "+ state
    },
    scales: {
        yAxes: [{
                    position:"left",
                    id: "y-axis",
                    ticks: {
                        autoSkip: false,
                    }
                }],
        xAxes: [{
            type: 'linear',  //type: 'linear', is needed for horizontal vote
            position: "top",
            id: "expenditure",
        }, {
            type: 'linear',
            position: "bottom",
            id: "votes",
        ticks: {
            beginAtZero: true
                }
            }]
        }   
    }
});`

任何想法？

标签： javascriptchartschart.jschartjs-2.6.0

解决方案

利用：

ticks: { 
    fontColor: "#377216", 
    beginAtZero: true 
    }

推荐阅读