angular - 多色折线图角度和底纹
问题描述
我的要求是根据数据集绘制多色图表,我只是尝试在同一个 Vale 上创建两条线,并且对于使用“null”的间隙。
请检查源网址:[ https://primeng-charts-playground-hrrbd1.stackblitz.io]。
即使看起来不错,我也无法用单个值(pt)控制线条颜色,每条线都需要两个点。
如何处理这个问题。
解决方案
下面是一个技巧,您需要为不同的颜色定义单独的数据集,但是,每个标签只有一个点,而不是两个。我不知道 Chart.js 中是否有针对此要求的内置支持。小提琴-> http://jsfiddle.net/dqonwrLh/2/
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 10, 3, 5],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 0.2)',
borderWidth: 1
},
{
label: '# of Votes1',
data: [null, null, null, 5, 8, 5],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 0.2)',
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
legend:{
display: false
}
}
});
推荐阅读
- javascript - 为什么会触发两个事件侦听器而不是一个?
- regex - sas 子字符串到第一个空格
- r - 将数值变量转换为 dplyr 中的因子
- php - 如何强制浏览器等到 php 服务器发送响应?
- javascript - socket.io 加入房间 N 次时发送 N 条消息
- javascript - 功能未按预期运行。为什么?
- windows - Native Windows:如何捕获被 Google Hangouts 等其他窗口覆盖的窗口
- c# - 使用 IReliableDictionary2 时数据何时保存到磁盘?
- python - 了解 Keras LSTM 张量板图
- bash - 如何在 Dockerfile 中的不同运行命令中生成“源 ....”?