Google图表时间表：着色问题
Google图表时间表：着色和条形标签出现问题
let result = [
[
"operator NEPRECIZAT",
"MICRO STOP",
"2020-08-25T04:00:24.000Z",
"2020-08-25T04:00:24.000Z"
],
[
"operator NEPRECIZAT",
"STATUS NEPRECIZAT",
"2020-08-25T04:00:24.000Z",
"2020-08-25T04:15:24.000Z"
],
[
"operator NEPRECIZAT",
"PRODUCTIE",
"2020-08-25T04:15:24.000Z",
"2020-08-25T04:17:50.000Z"
],
[
"operator NEPRECIZAT",
"MICRO STOP",
"2020-08-25T04:17:50.000Z",
"2020-08-25T04:23:24.000Z"
],
[
"operator NEPRECIZAT",
"PRODUCTIE",
"2020-08-25T04:23:24.000Z",
"2020-08-25T04:29:41.000Z"
],
[
"operator NEPRECIZAT",
"MICRO STOP",
"2020-08-25T04:29:41.000Z",
"2020-08-25T04:37:24.000Z"
],
[
"operator NEPRECIZAT",
"PRODUCTIE",
"2020-08-25T04:37:24.000Z",
"2020-08-25T04:44:52.000Z"
],
[
"operator NEPRECIZAT",
"MICRO STOP",
"2020-08-25T04:44:52.000Z",
"2020-08-25T04:50:24.000Z"
],
[
"operator NEPRECIZAT",
"PRODUCTIE",
"2020-08-25T04:50:24.000Z",
"2020-08-25T05:58:56.000Z"
],
[
"Ionut ALEXANDRU",
"REUNIUNI / PAUZE / FORMARI",
"2020-08-25T05:58:56.000Z",
"2020-08-25T06:07:25.000Z"
],
[
"Ionut ALEXANDRU",
"MICRO STOP",
"2020-08-25T06:07:25.000Z",
"2020-08-25T06:10:25.000Z"
],
[
"Ionut ALEXANDRU",
"PRODUCTIE",
"2020-08-25T06:10:25.000Z",
"2020-08-25T07:58:22.000Z"
],
[
"Ionut ALEXANDRU",
"REUNIUNI / PAUZE / FORMARI",
"2020-08-25T07:58:22.000Z",
"2020-08-25T08:18:27.000Z"
],
[
"Ionut ALEXANDRU",
"MICRO STOP",
"2020-08-25T08:18:27.000Z",
"2020-08-25T08:20:27.000Z"
],
[
"Ionut ALEXANDRU",
"PRODUCTIE",
"2020-08-25T08:20:27.000Z",
"2020-08-25T09:58:39.000Z"
],
[
"Ionut ALEXANDRU",
"REUNIUNI / PAUZE / FORMARI",
"2020-08-25T09:58:39.000Z",
"2020-08-25T10:09:28.000Z"
],
[
"Ionut ALEXANDRU",
"MICRO STOP",
"2020-08-25T10:09:28.000Z",
"2020-08-25T10:15:28.000Z"
],
[
"Ionut ALEXANDRU",
"STATUS NEPRECIZAT",
"2020-08-25T10:15:28.000Z",
"2020-08-25T10:43:28.000Z"
],
[
"Ionut ALEXANDRU",
"PRODUCTIE",
"2020-08-25T10:43:28.000Z",
"2020-08-25T11:21:54.000Z"
],
[
"Ionut ALEXANDRU",
"MICRO STOP",
"2020-08-25T11:21:54.000Z",
"2020-08-25T11:28:29.000Z"
],
[
"Ionut ALEXANDRU",
"STATUS NEPRECIZAT",
"2020-08-25T11:28:29.000Z",
"2020-08-25T11:46:29.000Z"
],
[
"Ionut ALEXANDRU",
"PRODUCTIE",
"2020-08-25T11:46:29.000Z",
"2020-08-25T11:47:05.000Z"
],
[
"Ionut ALEXANDRU",
"MICRO STOP",
"2020-08-25T11:47:05.000Z",
"2020-08-25T11:51:29.000Z"
],
[
"Ionut ALEXANDRU",
"PRODUCTIE",
"2020-08-25T11:51:29.000Z",
"2020-08-25T11:54:45.000Z"
],
[
"Ionut ALEXANDRU",
"MICRO STOP",
"2020-08-25T11:54:45.000Z",
"2020-08-25T11:59:29.000Z"
]
]
const { colorMap, colors } = this.getTimelineColorOptions(result);
this.timelineChart = {
title: 'Timeline',
type: ChartType.Timeline,
data: [...result],
columns: ['Name', 'Status', 'Start', 'End'],
options: {
animation: {
duration: 250,
easing: 'ease-in-out',
startup: true
},
timeline: {
showBarLabels: false,
},
avoidOverlappingGridLines: true,
colors: colors,
}
};
private getTimelineColorOptions(result: any) {
const colors = [];
const colorMap = {
'INTERVENTIE MATRITA/SDV': '#FFE25F',
'INTERVENTIE UTILAJ': '#FFE25F',
'SCHIMBARE MATRITA/SDV': '#FF99FF',
'SCHIMBARE REPER': '#FF99FF',
'SCHIMBARE TRASABILITATE': '#FF99FF',
'OPRIRI TEHNOLOGICE, REGLAJE': '#FF99FF',
'LIPSA UTILITATI (APA, AER, ELECTRICITATE)': '#FDB10F',
'LIPSA AMBALAJE (CUTII, CONTAINERE, ETC)': '#FDB10F',
'ASTEPTARE STIVUITOR, POD, MATRITA': '#FDB10F',
'LIPSA PERSONAL': '#FDB10F',
'ASTEPTARE MASURATORI 3D': '#FDB10F',
'LIPSA COMENZI': '#FDB10F',
'CONTROL CALITATE': '#FDB10F',
'ASTEPTARE MATERIE PRIMA': '#FDB10F',
'PROBE, MATERIALE, MATRITE, SDV': '#F34A4A',
'ORGANIZARE POST DE LUCRU / 5S': '#F34A4A',
'CURATENIE': '#F34A4A',
'REUNIUNI / PAUZE / FORMARI': '#F34A4A',
'MENTENTANTA PREVENTIVA, PREDICTIVA': '#F34A4A',
'PRODUCTIE': '#94E011',
'MICRO STOP': '#F7A4A4',
'Demaraj not OK': '#F34A4A',
'Lipsa conexiune': '#A8A3A3',
'STOP': '#A8A3A3',
'Utilaj neplanificat': '#F34A4A',
'Defect mecanic': '#FF99FF',
'Defect electric': '#FF99FF',
'Operator mutat': '#F34A4A',
'STATUS NEPRECIZAT': '#F7A4A4',
'Start monitorizare': '#A8A3A3',
};
result.forEach((r: (string | number)[]) => {
colors.push(colorMap[r[1]]);
});
return { colorMap, colors };
}
选项中的颜色：
0: "#F7A4A4"
1: "#F7A4A4"
2: "#94E011"
3: "#F7A4A4"
4: "#94E011"
5: "#F7A4A4"
6: "#94E011"
7: "#F7A4A4"
8: "#94E011"
9: "#F34A4A"
10: "#F7A4A4"
11: "#94E011"
12: "#F34A4A"
13: "#F7A4A4"
14: "#94E011"
15: "#F34A4A"
16: "#F7A4A4"
17: "#F7A4A4"
18: "#94E011"
19: "#F7A4A4"
20: "#F7A4A4"
21: "#94E011"
22: "#F7A4A4"
23: "#94E011"
24: "#F7A4A4"
呈现的颜色：
<rect x="156.5" y="9" width="3" height="22.991999999999997" stroke="none" stroke-width="0" fill="#f7a4a4"/>
<rect x="159" y="9" width="45.4011132370847" height="22.991999999999997" stroke="none" stroke-width="0" fill="#f7a4a4"/>
<rect x="204.4011132370847" y="9" width="7.527291702904847" height="22.991999999999997" stroke="none" stroke-width="0" fill="#94e011"/>
<rect x="211.92840493998955" y="9" width="17.219968690206997" height="22.991999999999997" stroke="none" stroke-width="0" fill="#f7a4a4"/>
<rect x="229.14837363019655" y="9" width="19.416489824317296" height="22.991999999999997" stroke="none" stroke-width="0" fill="#94e011"/>
<rect x="250.56486345451384" y="9" width="21.891215863628474" height="22.991999999999997" stroke="none" stroke-width="0" fill="#f7a4a4"/>
<rect x="272.4560793181423" y="9" width="23.09744303357104" height="22.991999999999997" stroke="none" stroke-width="0" fill="#94e011"/>
<rect x="295.55352235171335" y="9" width="17.116855105235686" height="22.991999999999997" stroke="none" stroke-width="0" fill="#f7a4a4"/>
<rect x="312.67037745694904" y="9" width="212.00153070099145" height="22.991999999999997" stroke="none" stroke-width="0" fill="#94e011"/>
<rect x="524.6719081579406" y="49.992" width="26.24240737519574" height="22.991999999999997" stroke="none" stroke-width="0" fill="#f7a4a4"/>
<rect x="550.9143155331362" y="49.992" width="9.280222647416963" height="22.991999999999997" stroke="none" stroke-width="0" fill="#f7a4a4"/>
<rect x="560.1945381805531" y="49.992" width="333.93334492955296" height="22.991999999999997" stroke="none" stroke-width="0" fill="#94e011"/>
<rect x="894.1278831101062" y="49.992" width="62.12593494520786" height="22.991999999999997" stroke="none" stroke-width="0" fill="#f7a4a4"/>
<rect x="956.253818055314" y="49.992" width="6.186815098277975" height="22.991999999999997" stroke="none" stroke-width="0" fill="#f7a4a4"/>
<rect x="962.440633153592" y="49.992" width="303.772621325448" height="22.991999999999997" stroke="none" stroke-width="0" fill="#94e011"/>
<rect x="1266.21325447904" y="49.992" width="33.46035832318671" height="22.991999999999997" stroke="none" stroke-width="0" fill="#f7a4a4"/>
<rect x="1299.6736128022264" y="49.992" width="18.560445294833926" height="22.991999999999997" stroke="none" stroke-width="0" fill="#f7a4a4"/>
<rect x="1318.2340580970604" y="49.992" width="86.61541137589143" height="22.991999999999997" stroke="none" stroke-width="0" fill="#f7a4a4"/>
<rect x="1404.8494694729518" y="49.992" width="118.88996347190823" height="22.991999999999997" stroke="none" stroke-width="0" fill="#94e011"/>
<rect x="1523.73943294486" y="49.992" width="20.364933031831697" height="22.991999999999997" stroke="none" stroke-width="0" fill="#f7a4a4"/>
<rect x="1544.1043659766917" y="49.992" width="55.68133588450155" height="22.991999999999997" stroke="none" stroke-width="0" fill="#f7a4a4"/>
<rect x="1599.213724125935" y="49.992" width="3" height="22.991999999999997" stroke="none" stroke-width="0" fill="#94e011"/>
<rect x="1601.6417463906766" y="49.992" width="13.610993216211455" height="22.991999999999997" stroke="none" stroke-width="0" fill="#f7a4a4"/>
<rect x="1615.252739606888" y="49.992" width="10.105131327187337" height="22.991999999999997" stroke="none" stroke-width="0" fill="#94e011"/>
<rect x="1625.3578709340754" y="49.992" width="14.642129065924564" height="22.991999999999997" stroke="none" stroke-width="0" fill="#f7a4a4"/>
您会看到颜色：选项中存在＃F34A4A，但未呈现
这是它的样子
可能是什么问题？
1 个答案:
答案 0 :(得分：1)
事实证明，
时间线图表的颜色选项，
在colors数组中分配每种颜色，
到每个唯一的条形标签。
在提供的示例中，只有四个唯一的条形标签（用于绘制图表的数据中）。
因此数组中应该只有四种颜色。
要更正此问题，
您可以修改getTimelineColorOptions以首先构建唯一的条形标签列表，
然后为每种颜色分配颜色...
private getTimelineColorOptions(result: any) {
const colors = [];
const colorMap = {
'INTERVENTIE MATRITA/SDV': '#FFE25F',
'INTERVENTIE UTILAJ': '#FFE25F',
'SCHIMBARE MATRITA/SDV': '#FF99FF',
'SCHIMBARE REPER': '#FF99FF',
'SCHIMBARE TRASABILITATE': '#FF99FF',
'OPRIRI TEHNOLOGICE, REGLAJE': '#FF99FF',
'LIPSA UTILITATI (APA, AER, ELECTRICITATE)': '#FDB10F',
'LIPSA AMBALAJE (CUTII, CONTAINERE, ETC)': '#FDB10F',
'ASTEPTARE STIVUITOR, POD, MATRITA': '#FDB10F',
'LIPSA PERSONAL': '#FDB10F',
'ASTEPTARE MASURATORI 3D': '#FDB10F',
'LIPSA COMENZI': '#FDB10F',
'CONTROL CALITATE': '#FDB10F',
'ASTEPTARE MATERIE PRIMA': '#FDB10F',
'PROBE, MATERIALE, MATRITE, SDV': '#F34A4A',
'ORGANIZARE POST DE LUCRU / 5S': '#F34A4A',
'CURATENIE': '#F34A4A',
'REUNIUNI / PAUZE / FORMARI': '#F34A4A',
'MENTENTANTA PREVENTIVA, PREDICTIVA': '#F34A4A',
'PRODUCTIE': '#94E011',
'MICRO STOP': '#F7A4A4',
'Demaraj not OK': '#F34A4A',
'Lipsa conexiune': '#A8A3A3',
'STOP': '#A8A3A3',
'Utilaj neplanificat': '#F34A4A',
'Defect mecanic': '#FF99FF',
'Defect electric': '#FF99FF',
'Operator mutat': '#F34A4A',
'STATUS NEPRECIZAT': '#F7A4A4',
'Start monitorizare': '#A8A3A3',
};
const barLabels = [];
result.forEach(r => {
if (barLabels.indexOf(r[1]) === -1) {
barLabels.push(r[1]);
}
});
barLabels.forEach(b => {
colors.push(colorMap[b]);
});
return { colorMap, colors };
}
请参阅以下工作摘要...
google.charts.load('current', {
packages: ['timeline', 'controls']
}).then(function () {
let result = [
[
"operator NEPRECIZAT",
"MICRO STOP",
"2020-08-25T04:00:24.000Z",
"2020-08-25T04:00:24.000Z"
],
[
"operator NEPRECIZAT",
"STATUS NEPRECIZAT",
"2020-08-25T04:00:24.000Z",
"2020-08-25T04:15:24.000Z"
],
[
"operator NEPRECIZAT",
"PRODUCTIE",
"2020-08-25T04:15:24.000Z",
"2020-08-25T04:17:50.000Z"
],
[
"operator NEPRECIZAT",
"MICRO STOP",
"2020-08-25T04:17:50.000Z",
"2020-08-25T04:23:24.000Z"
],
[
"operator NEPRECIZAT",
"PRODUCTIE",
"2020-08-25T04:23:24.000Z",
"2020-08-25T04:29:41.000Z"
],
[
"operator NEPRECIZAT",
"MICRO STOP",
"2020-08-25T04:29:41.000Z",
"2020-08-25T04:37:24.000Z"
],
[
"operator NEPRECIZAT",
"PRODUCTIE",
"2020-08-25T04:37:24.000Z",
"2020-08-25T04:44:52.000Z"
],
[
"operator NEPRECIZAT",
"MICRO STOP",
"2020-08-25T04:44:52.000Z",
"2020-08-25T04:50:24.000Z"
],
[
"operator NEPRECIZAT",
"PRODUCTIE",
"2020-08-25T04:50:24.000Z",
"2020-08-25T05:58:56.000Z"
],
[
"Ionut ALEXANDRU",
"REUNIUNI / PAUZE / FORMARI",
"2020-08-25T05:58:56.000Z",
"2020-08-25T06:07:25.000Z"
],
[
"Ionut ALEXANDRU",
"MICRO STOP",
"2020-08-25T06:07:25.000Z",
"2020-08-25T06:10:25.000Z"
],
[
"Ionut ALEXANDRU",
"PRODUCTIE",
"2020-08-25T06:10:25.000Z",
"2020-08-25T07:58:22.000Z"
],
[
"Ionut ALEXANDRU",
"REUNIUNI / PAUZE / FORMARI",
"2020-08-25T07:58:22.000Z",
"2020-08-25T08:18:27.000Z"
],
[
"Ionut ALEXANDRU",
"MICRO STOP",
"2020-08-25T08:18:27.000Z",
"2020-08-25T08:20:27.000Z"
],
[
"Ionut ALEXANDRU",
"PRODUCTIE",
"2020-08-25T08:20:27.000Z",
"2020-08-25T09:58:39.000Z"
],
[
"Ionut ALEXANDRU",
"REUNIUNI / PAUZE / FORMARI",
"2020-08-25T09:58:39.000Z",
"2020-08-25T10:09:28.000Z"
],
[
"Ionut ALEXANDRU",
"MICRO STOP",
"2020-08-25T10:09:28.000Z",
"2020-08-25T10:15:28.000Z"
],
[
"Ionut ALEXANDRU",
"STATUS NEPRECIZAT",
"2020-08-25T10:15:28.000Z",
"2020-08-25T10:43:28.000Z"
],
[
"Ionut ALEXANDRU",
"PRODUCTIE",
"2020-08-25T10:43:28.000Z",
"2020-08-25T11:21:54.000Z"
],
[
"Ionut ALEXANDRU",
"MICRO STOP",
"2020-08-25T11:21:54.000Z",
"2020-08-25T11:28:29.000Z"
],
[
"Ionut ALEXANDRU",
"STATUS NEPRECIZAT",
"2020-08-25T11:28:29.000Z",
"2020-08-25T11:46:29.000Z"
],
[
"Ionut ALEXANDRU",
"PRODUCTIE",
"2020-08-25T11:46:29.000Z",
"2020-08-25T11:47:05.000Z"
],
[
"Ionut ALEXANDRU",
"MICRO STOP",
"2020-08-25T11:47:05.000Z",
"2020-08-25T11:51:29.000Z"
],
[
"Ionut ALEXANDRU",
"PRODUCTIE",
"2020-08-25T11:51:29.000Z",
"2020-08-25T11:54:45.000Z"
],
[
"Ionut ALEXANDRU",
"MICRO STOP",
"2020-08-25T11:54:45.000Z",
"2020-08-25T11:59:29.000Z"
]
]
const colors = getTimelineColorOptions(result);
const timelineChart = new google.visualization.ChartWrapper({
chartType: 'Timeline',
containerId: 'chart',
dataTable: google.visualization.arrayToDataTable([['Name', 'Status', 'Start', 'End']].concat(result).map((row, index) => {
if (index === 0) {
return row;
} else {
return [
row[0],
row[1],
new Date(row[2]),
new Date(row[3])
];
}
})),
options: {
timeline: {
showBarLabels: false
},
avoidOverlappingGridLines: true,
colors: colors
}
});
timelineChart.draw();
function getTimelineColorOptions(result) {
const colors = [];
const colorMap = {
'INTERVENTIE MATRITA/SDV': '#FFE25F',
'INTERVENTIE UTILAJ': '#FFE25F',
'SCHIMBARE MATRITA/SDV': '#FF99FF',
'SCHIMBARE REPER': '#FF99FF',
'SCHIMBARE TRASABILITATE': '#FF99FF',
'OPRIRI TEHNOLOGICE, REGLAJE': '#FF99FF',
'LIPSA UTILITATI (APA, AER, ELECTRICITATE)': '#FDB10F',
'LIPSA AMBALAJE (CUTII, CONTAINERE, ETC)': '#FDB10F',
'ASTEPTARE STIVUITOR, POD, MATRITA': '#FDB10F',
'LIPSA PERSONAL': '#FDB10F',
'ASTEPTARE MASURATORI 3D': '#FDB10F',
'LIPSA COMENZI': '#FDB10F',
'CONTROL CALITATE': '#FDB10F',
'ASTEPTARE MATERIE PRIMA': '#FDB10F',
'PROBE, MATERIALE, MATRITE, SDV': '#F34A4A',
'ORGANIZARE POST DE LUCRU / 5S': '#F34A4A',
'CURATENIE': '#F34A4A',
'REUNIUNI / PAUZE / FORMARI': '#F34A4A',
'MENTENTANTA PREVENTIVA, PREDICTIVA': '#F34A4A',
'PRODUCTIE': '#94E011',
'MICRO STOP': '#F7A4A4',
'Demaraj not OK': '#F34A4A',
'Lipsa conexiune': '#A8A3A3',
'STOP': '#A8A3A3',
'Utilaj neplanificat': '#F34A4A',
'Defect mecanic': '#FF99FF',
'Defect electric': '#FF99FF',
'Operator mutat': '#F34A4A',
'STATUS NEPRECIZAT': '#F7A4A4',
'Start monitorizare': '#A8A3A3',
};
const barLabels = [];
result.forEach(r => {
if (barLabels.indexOf(r[1]) === -1) {
barLabels.push(r[1]);
}
});
barLabels.forEach(b => {
colors.push(colorMap[b]);
});
return colors;
}
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？