Line Chart.js中具有反转图像的点样式属性 [英] Point Style property with Inverted Image in Line Chart.js
问题描述
引用小提琴
图表js允许提供 pointStyle 的数组而不是仅提供1.它还允许提供图像以代替预设的指针样式.
var image = document.getElementById('source');var options = {类型:行"，数据: {标签:[红色"，蓝色"，黄色"，绿色"，紫色"，橙色"]，数据集:[{标签:投票数"，数据:[12，-19、3、5、2、3]，borderWidth:1pointStyle:['triangle'，image，'triangle'，'triangle'，'triangle'，'triangle']，pointRadius:"10"，pointBackgroundColor:红色"}，]，pointStyle:三角形"}，选项: {比例尺:{y轴:[{滴答声:{反向:错误}}]}}}var ctx = document.getElementById('chartJSContainer').getContext('2d');新图表(ctx，选项)； < 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> 要使其动态化，您可以映射数据集中的数据以生成 pointerStyle 数组
let pointerStyles = [12，-19,2,3,4] .map(value => {返回值> = 0?'triangle':'other-triangle'});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);
这篇关于Line Chart.js中具有反转图像的点样式属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
