将 HTML 添加到条形图的标签 - 图表 js

Question

我正在使用图表js来显示条形图。它在正常情况下正常工作，但我愿意更改标签的颜色或一小部分，即我想在条形图的标签上包含一些 HTML。但是，它不会呈现 HTML，而是显示纯 HTML 文本。

如果不可能，如果有其他方法可以实现这一点，我可以，改变价格的颜色并保持名称不变。

let $js_dom_array = ["43.28", "93.13"];
let $js_am_label_arr = ["<span>$0</span> None", "<span class='text-danger'>$23.63</span> Handicap Accessible"];

let ctx2 = document.getElementById("barChart").getContext("2d");

        let chart = new Chart(ctx2, {
            type: 'bar',
            data: {
                labels: $js_am_label_arr,
                datasets: [{
                    label: 'Amenity Name',
                    data: $js_dom_array,
                    backgroundColor: 'rgba(26,179,148,0.5)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                legendCallback: function(chart) {
                    var text = [];
                    for (var i=0; i<chart.data.datasets.length; i++) {
                        console.log(chart.data.datasets[i]); // see what's inside the obj.
                        text.push(chart.data.datasets[i].label);
                    }
                    return text.join("");
                },
                tooltips: {
                    "enabled": false
                },
                scales: {
                    xAxes: [{
                        stacked: false,
                        beginAtZero: true,
                        ticks: {
                            stepSize: 1,
                            min: 0,
                            autoSkip: false,
                            callback: function(label, index, labels) {
                                if (/\s/.test(label)) {
                                    return label.split(" ");
                                }else{
                                    return label;
                                }
                            }
                        }
                    }]
                },
                animation: {
                    duration: 0,
                    onProgress: function() {
                        var chartInstance = this.chart,
                            ctx = chartInstance.ctx;
                        ctx.font = Chart.helpers.fontString(16, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'bottom';
                        this.data.datasets.forEach(function(dataset, i) {
                            var meta = chartInstance.controller.getDatasetMeta(i);
                            meta.data.forEach(function(bar, index) {
                                if (dataset.data[index] > 0) {
                                    let data = dataset.data[index];
                                    ctx.fillText('$'+Math.round(data), bar._model.x, bar._model.y - 5);
                                }
                            });
                        });
                    }
                },
            }
        });

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <canvas id="barChart" height="140"></canvas>
</div>

#Note: 在这里，您可能会看到 $js_am_label_arr 中的数据已经是一个 HTML 元素，但是如果我可以从其中传递原始值数组和 HTML 中的转换，那么我可以传递原始值（没有）也是如此。 目前$js_am_label_arr 被创建为：

if($avg_amount < 0){
    $text_color = 'text-danger';
    $avg_amount_text = "<span class='text-danger'>$".abs($avg_amount)."</span>";
}else{
    $text_color = '';
    $avg_amount_text = "<span>$".abs($avg_amount)."</span>";
}
$am_label_arr[] = $avg_amount_text.' '.$fv['amenity_name'];

更新：

预期输出

因此，例如在上述情况下，如果值为负，则为-$23.63。在这种情况下，我希望标签为 ($23.63)[红色]，后跟名称 Handicap Accessible。这也可以在结果中看到，添加了text-danger 类以将该部分显示为红色。

Answer 1

由于您对任何插件都持开放态度，因此我建议您使用HighCharts 来实现上述情况。在下面的演示代码中，我刚刚将标签值传递给 xAxis 中的 categories 并对 span 标签进行了一些更改。即：我添加了内联 css 以跨越您需要显示红色的地方。

这是演示代码：

var chart;
let $js_dom_array = [43.28, 93.13];
let $js_am_label_arr = ["<span>$0</span> None", "<span style='color:red'>$23.63</span> Handicap Accessible"];
$(document).ready(function() {
  chart = new Highcharts.Chart({
    chart: {
      renderTo: 'chart_container', //under chart_container chart will display
      defaultSeriesType: 'bar', //bar grapgh
      backgroundColor: '#CCCCCC',
      type: 'column' //to display in columns wise
    },
    plotOptions: {
      bar: {
        colorByPoint: true,
        dataLabels: {
          enabled: false
        }
      }
    },
    title: {
      text: 'Something.... '
    },
    xAxis: {
      categories: $js_am_label_arr, //for value in labels
    },
    series: [{
      name: 'Amenity Name',
      data: $js_dom_array //array value to plot data
    }]

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>

<div id="chart_container"></div>

Answer 2

您可以在悬停标签时更改颜色，使用tooltips callback

将鼠标移到栏上

let $js_dom_array = [43.28, 93.13];
  let $js_am_label_arr = ["$0", "$23.63"];

  let ctx2 = document.getElementById("barChart").getContext("2d");

  let chart = new Chart(ctx2, {
      type: 'bar',
      data: {
          labels: $js_am_label_arr,
          datasets: [{
              backgroundColor: 'rgba(26,179,148,0.5)',
              label: 'Amenity Name',
              data: $js_dom_array,
          }]
      },
      options: {
          responsive: true,
          maintainAspectRatio: true,
          tooltips: {
              enable: true,
              callbacks: {
                  labelTextColor: function(tooltipItem, chart) {
                  if(tooltipItem.index === 1)
                      return 'red';
                  }
              }
          },
          scales: {
              xAxes: [{
                  stacked: false,
                  beginAtZero: true,
                  ticks: {
                      stepSize: 1,
                      min: 0,
                      autoSkip: false,
                      fontColor: "red",
                      callback: function(label, index, labels) {
                          if (/\s/.test(label)) {
                              return label.split(" ");
                          }else{
                              return label;
                          }
                      }
                  }
              }]
          }
      }
  });

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <canvas id="barChart" height="140"></canvas>
</div>

Answer 3

据我所知，它不可能做你想做的事。 使用当前版本 (v2.9.3) 甚至无法更改特定 X 刻度标签的颜色，您只能更改每个标签的颜色：

    options: {
            scales: {
                yAxes: [{
                    ticks: {
                        fontColor: "red",
                    }
                }],
                xAxes: [{
                    ticks: {
                        fontColor: "red",
                    }
                }]
            }
        }

v2.6.0 版有一个解决方法（当您标记此版本时，我想您正在使用它），您可以将一组颜色传递给fontColor，例如：fontColor: ["red","green"]，但您需要更改chartjs 的一些代码行，但您不能随意更改轴刻度标签文本的特定部分。

如果您对此解决方案感兴趣，可以在这里查看Add possibility to change style for each of the ticks

但同样，此解决方案与旧版本的 chartjs 有关，我不知道您在这里失去了哪些功能。

3.0 版好像可以更改每个刻度的颜色，但是这个版本还没有发布。

更新

我在这里用 c3/d3 js 做了一个简单的例子。但它有几点：

1. 在呈现图表时显示更新的标签需要一点时间。
2. 在 changeTickLabel 上，我做了一个硬编码来检查值，然后附加文本（如“Handicap Accessible”）。所以在这里你需要找到更适合你的逻辑。

var chart = c3.generate({
    onrendered: function () { changeTickLabel() },
    data: {
        columns: [
            ['data1', 43.28, 93.13]
        ],
        type: 'bar',
    },
    axis: {
        x : {
           type: 'category',
           categories:  ["$0", "$23.63"],
           tick: {
                multiline:false,
                culling: {
                    max: 1
                },
            },
        },
    }
});



function changeTickLabel(){

d3.selectAll('.c3-axis-x .tick tspan')
  .each(function(d,i){
    var self = d3.select(this);
    var textValue = self.text();  

    if(textValue !== '$0'){
      self.style("fill", "red");
    self.append('tspan').style("fill", "black").text(' Handicap Accessible');  
    }
    else {
      self.append('tspan').text(' None');
    }  
});
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chart"></div>