将HTML添加到条形图的标签-Chart JS

问题描述

我正在使用图表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,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>

＃注意：在这里，您可能会看到$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类以红色显示该部分。

解决方法

由于您对任何插件都开放，所以我建议您使用HighCharts来实现上述效果。在下面的演示代码中，我刚刚将标签值传递给了xAxis中的DDD，并对span标签做了一些改动。即：我已添加内联CSS来覆盖需要显示红色的位置。

这是演示代码 ：

categories

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
    }]

  });
});

据我所知，不可能做你想做的。在当前版本（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做了一个简单的例子。但有几点：

渲染图表时需要花费一些时间来显示更新的标签。
在changeTickLabel上，我执行了一个严格的代码来检查值，然后附加文本（例如“让残障人士使用”）。因此，在这里您需要找到更适合自己的逻辑。

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>

悬停标签时，您可以使用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>

chartjs-2.6.0 javascript jquery