折线图.js中带有倒置图像的点样式属性 [英] Point Style property with Inverted Image in Line Chart.js
问题描述
参考小提琴
Chart js 允许提供一个 pointStyle 数组，而不是仅提供 1 个.它还允许提供图像来代替预设的指针样式.
var image = document.getElementById('source');变量选项 = {类型:'线'，数据: {标签:[红色"，蓝色"，黄色"，绿色"，紫色"，橙色"]，数据集:[{标签:'投票数'，数据:[12, -19, 3, 5, 2, 3],边框宽度:1，pointStyle: ['triangle', image, 'triangle', 'triangle', 'triangle', 'triangle'],点半径:'10'，点背景颜色:'红色'},],点样式:'三角形'},选项: {秤:{y轴:[{滴答声:{反向:假}}]}}}var ctx = document.getElementById('chartJSContainer').getContext('2d');新图表(ctx，选项)；<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></脚本><canvas id="chartJSContainer" width="600" height="400"></canvas><div style="display:none;"><img id="source" src="https://image.flaticon.com/icons/png/128/25/25224.png"></div>为了使这个动态化，您可以映射数据集中的数据以生成 pointerStyle 数组
让 pointerStyles = [12,-19,2,3,4].map(value=>{返回值 >=0 ?三角形":其他三角形"});console.log(pointerStyles);Refer the fiddle URL : https://jsfiddle.net/vL0ta76w/
Current Behaviour Point Style Property in Chart.js provides certain icons like a circle, triangle, rect, etc. to be displayed on the line chart
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
label: '# of Votes',
data: [12, -19, 3, 5, 2, 3],
borderWidth: 1,
pointStyle:'triangle',
pointRadius:'10',
pointBackgroundColor:'red'
},
],
pointStyle:'triangle'
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
canvas { background-color : #eee;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>
Expected Result:
However is it possible to display an inverted triangle? Any property to display an inverted triangle or any custom image that can be inserted Through the method, I can manage to change color if the dataset has negative value. but facing issue while showing the image as inverted or rotated 180 degrees
Chart js allows an array of pointStyles to be supplied instead of just 1. It also allows images to be supplied in place of a preset pointer style.
var image = document.getElementById('source');
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, -19, 3, 5, 2, 3],
borderWidth: 1,
pointStyle: ['triangle', image, 'triangle', 'triangle', 'triangle', 'triangle'],
pointRadius: '10',
pointBackgroundColor: 'red'
},
],
pointStyle: 'triangle'
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<div style="display:none;">
<img id="source" src="https://image.flaticon.com/icons/png/128/25/25224.png">
</div>
To then make this dynamic you could map the data in the datset to produce the pointerStyle array
let pointerStyles = [12,-19,2,3,4].map(value=>{
return value >=0 ? 'triangle' : 'other-triangle'
});
console.log(pointerStyles);
这篇关于折线图.js中带有倒置图像的点样式属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
