添加 HTML 到条形图的标签 - 图表 js
Add HTML to label of bar chart - chart js
我正在使用图表 js 来显示条形图。它在正常情况下工作正常,但我愿意更改颜色或标签的一小部分,即我想在条形图的标签上包含一些 HTML。但是,它没有呈现 HTML 而是显示纯 HTML 文本。
如果不可能,如果有另一种方法来实现这个对我来说没关系,改变价格的颜色并保持名称不变。
let $js_dom_array = ["43.28", "93.13"];
let $js_am_label_arr = ["<span>[=11=]</span> None", "<span class='text-danger'>.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>
#注意:在这里,您可能会看到 $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'];
更新:
预期输出
因此,如果在上述情况下该值为负数,则为 -.63
。在本例中,我希望标签为 ($23.63)[红色],后跟名称 Handicap Accessible
。这也可以在结果中看到,添加 text-danger
类 以显示红色部分。
据我所知,你想做的事是不可能的。
使用当前版本 (v2.9.3) 甚至无法更改特定 X 标记标签的颜色,您只能更改每个标签的颜色:
options: {
scales: {
yAxes: [{
ticks: {
fontColor: "red",
}
}],
xAxes: [{
ticks: {
fontColor: "red",
}
}]
}
}
版本 v2.6.0 有一个变通方法(当你标记这个版本时,我想你正在使用它)你可以将一组颜色传递给 fontColor
,例如:fontColor: ["red","green"]
, 但你需要更改chartjs的一些代码行,但你不能随意更改轴刻度标签文本的特定部分。
如果您对此解决方案感兴趣,可以在此处查看 添加为每个刻度更改样式的可能性
但同样,此解决方案与旧版本的 chartjs 有关,我不知道您在这里丢失了哪些功能。
看起来在 3.0 版本中它可以改变每个刻度的颜色,但是这个版本还没有发布。
已更新
我在这里用 c3/d3 js 做了一个简单的例子。但它有几点:
- 渲染图表时显示更新的标签需要一点时间。
- 在 changeTickLabel 上,我做了一个硬代码来检查值,然后附加文本(如 'Handicap Accessible')。所以在这里你需要找到更适合你的逻辑。
var chart = c3.generate({
onrendered: function () { changeTickLabel() },
data: {
columns: [
['data1', 43.28, 93.13]
],
type: 'bar',
},
axis: {
x : {
type: 'category',
categories: ["[=11=]", ".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 !== '[=11=]'){
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 = ["[=10=]", ".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>
由于您对任何插件都持开放态度,因此我建议您使用 HighCharts 来实现上述情况。在下面的演示代码中,我刚刚将标签值传递给 xAxis 中的 categories
并对 span 标签做了一些改动。即:我添加了内联 css 来跨越你需要显示红色的地方。
这是演示代码 :
var chart;
let $js_dom_array = [43.28, 93.13];
let $js_am_label_arr = ["<span>[=10=]</span> None", "<span style='color:red'>.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>
我正在使用图表 js 来显示条形图。它在正常情况下工作正常,但我愿意更改颜色或标签的一小部分,即我想在条形图的标签上包含一些 HTML。但是,它没有呈现 HTML 而是显示纯 HTML 文本。
如果不可能,如果有另一种方法来实现这个对我来说没关系,改变价格的颜色并保持名称不变。
let $js_dom_array = ["43.28", "93.13"];
let $js_am_label_arr = ["<span>[=11=]</span> None", "<span class='text-danger'>.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>
#注意:在这里,您可能会看到 $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'];
更新:
预期输出
因此,如果在上述情况下该值为负数,则为 -.63
。在本例中,我希望标签为 ($23.63)[红色],后跟名称 Handicap Accessible
。这也可以在结果中看到,添加 text-danger
类 以显示红色部分。
据我所知,你想做的事是不可能的。 使用当前版本 (v2.9.3) 甚至无法更改特定 X 标记标签的颜色,您只能更改每个标签的颜色:
options: {
scales: {
yAxes: [{
ticks: {
fontColor: "red",
}
}],
xAxes: [{
ticks: {
fontColor: "red",
}
}]
}
}
版本 v2.6.0 有一个变通方法(当你标记这个版本时,我想你正在使用它)你可以将一组颜色传递给 fontColor
,例如:fontColor: ["red","green"]
, 但你需要更改chartjs的一些代码行,但你不能随意更改轴刻度标签文本的特定部分。
如果您对此解决方案感兴趣,可以在此处查看 添加为每个刻度更改样式的可能性
但同样,此解决方案与旧版本的 chartjs 有关,我不知道您在这里丢失了哪些功能。
看起来在 3.0 版本中它可以改变每个刻度的颜色,但是这个版本还没有发布。
已更新
我在这里用 c3/d3 js 做了一个简单的例子。但它有几点:
- 渲染图表时显示更新的标签需要一点时间。
- 在 changeTickLabel 上,我做了一个硬代码来检查值,然后附加文本(如 'Handicap Accessible')。所以在这里你需要找到更适合你的逻辑。
var chart = c3.generate({
onrendered: function () { changeTickLabel() },
data: {
columns: [
['data1', 43.28, 93.13]
],
type: 'bar',
},
axis: {
x : {
type: 'category',
categories: ["[=11=]", ".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 !== '[=11=]'){
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 = ["[=10=]", ".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>
由于您对任何插件都持开放态度,因此我建议您使用 HighCharts 来实现上述情况。在下面的演示代码中,我刚刚将标签值传递给 xAxis 中的 categories
并对 span 标签做了一些改动。即:我添加了内联 css 来跨越你需要显示红色的地方。
这是演示代码 :
var chart;
let $js_dom_array = [43.28, 93.13];
let $js_am_label_arr = ["<span>[=10=]</span> None", "<span style='color:red'>.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>