【发布时间】：2021-08-16 16:24:29
【问题描述】：
我有这个图表在 chart.js 中工作，它从 csv 文件中提取数据。到目前为止，我对自己的成就感到满意，但我似乎仍然无法以某些方式影响样式。我正在使用 chart.js 旧版本 2.9.3
-
我正在使用 datalabel 插件将值添加到图表上的条形图，但是如何设置值的字体样式？我想给它们上色并让它们显示在条形区域之外。我一直在尝试将样式标签放在不同的区域，但似乎没有任何效果。我在代码中使用红色进行测试。 我还尝试了一个名为 formatter 的 javascript 函数，但这似乎也没有任何作用。也许我的变量名有误？
-
我也想去掉底部的数字，但勾选：{display: false} 似乎不起作用。
对不起，我是一个代码新手，感到很沮丧。任何帮助将不胜感激。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Project 1</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/1.0.0/chartjs-plugin-datalabels.min.js" integrity="sha512-XulchVN83YTvsOaBGjLeApZuasKd8F4ZZ28/aMHevKjzrrjG0lor+T4VU248fWYMNki3Eimk+uwdlQS+uZmu8g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div class="wrapper">
<h1>MY CHART HERE</h1>
<h2>Results of a survey </h2>
<canvas id="myChart" width="350" height="250" style="background-color:white;"></canvas>
</div>
<script>
window.addEventListener('load', setup);
async function setup() {
var ctx = document.getElementById('myChart').getContext('2d');
var poll = await getData();
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: poll.years,
datasets: [{
label: 'how many people (%)',
data: poll.vals,
backgroundColor: [
'#cd0000',
'#eb7d44',
'#70AA5B',
'#CAF0FD',
'#134D85',
],
}]
},
options: {
scaleShowLabels: false,
plugins: {
datalabels: {
align: 'end',
color: 'red',
formatter: function(value, context) {
return context.chart.data.labels[context.dataIndex];
}
}
},
layout: {
padding: {
left: 0,
right: 0,
top: 8,
bottom: 0
}
},
responsive: true,
title: {
display: false
},
legend: {
display: true,
position: 'top',
usePointStyle: true,
padding: 1,
labels: {
boxWidth: 15
}
},
scales: {
yAxes: [{
ticks: {
display: false,
color: '#ffffff',
zeroLineColor: '#ffffff'
}
}],
xAxes: [{
ticks: {
display: false
},
}],
}
},
plugins: [ChartDataLabels],
options: {
datalabels: {
color: 'red',
align: 'end'
}
},
});
}
async function getData() {
// const response = await fetch('testdata.csv');
var response = await fetch('data/test2.csv');
var data = await response.text();
data = data.replace(/"/g, "");
var years = [];
var vals = [];
var rows = data.split('\n').slice(1);
rows = rows.slice(0, rows.length - 1);
rows = rows.filter(row => row.length !== 0)
rows.forEach(row => {
var cols = row.split(",");
years.push(cols[0]);
vals.push(0 + parseFloat(cols[2]));
});
console.log(years, vals);
return {
years,
vals
};
}
</script>
</body>
</html>
图表图片：
【问题讨论】：
-
这里好像也发不了图片。呜呜！！
-
这里是图表屏幕截图的链接dropbox.com/s/42absds48cpsj3p/chart.jpg?dl=0
-
您能否提供问题的工作示例，但根据您提供的内容，它可以正常工作，datalabels 插件的标签颜色已更改并且 y 刻度已隐藏：jsfiddle.net/Leelenaleee/xfn84bmo/13
-
你好，Leelen。我认为我无法通过我的雇主提供指向服务器位置的链接。你能在我上面发布的屏幕截图中看到底部比例仍然显示在那里吗？我还看到您将选项声明为变量。我是否需要这样做才能使数据值显示为红色？ 。我完全迷失了。
-
在这个函数中，它应该是 poll.vals 还是数据而不是标签上的数字？ ``` 格式化程序：函数（值，上下文）{ 返回 context.chart.data.labels[context.dataIndex]; }```
标签： javascript chart.js