我正在使用zingchart的散点图来可视化我的数据。我想更改某些值大于60的数据的颜色。可能吗?这是我的代码,但是不起作用:
var myConfig = {
"type": "scatter",
"plot": {
"tooltip": {
"text": "%k (Date), %v (Value)."
},
"rules": [
{
"rule": "%v > 60",
"scatter-color": "#c00"
}
]
},
"series": [
{
"values": c
}
],
"title" : {
"text" : qualityData.ParameterName
},
"scale-x": {
"zooming": true,
"step": "1hour",
"transform": {
"type": "date",
"all": "%d.%m.%Y %H:%i:%s"
}
},
"scale-y": {
"zooming": true,
"markers": [
{
"type": "line",
"line-width": 2,
"text": "Lower tolerance",
"range": [qualityData.ToleranceMin, qualityData.ToleranceMin],
"line-color": "red"
},
{
"type": "line",
"line-width": 2,
"text": "Upper tolerance",
"range": [qualityData.ToleranceMax, qualityData.ToleranceMax],
"line-color": "red"
}
],
},
"preview": {
"visible": true
}
};
这是我的图表的样子:
最佳答案
快速解决
您需要将rules
移到plot.marker
对象中,并且需要将scatter-color
更改为backgroundColor
。
条件样式
您可以通过两种方式实现条件样式:rules
jsRule
rules
属性
像上面一样定义一个规则,它将在每个节点上运行if语句。您可以具有多个规则和一种简单的语义方式来定义条件样式。
此处的文档:https://www.zingchart.com/docs/tutorials/elements/rules
此处演示:https://app.zingsoft.com/demos/create/J6W2EALFjsRule
属性
Java替代rules
的性能更高。 rules
是一个if语句,它将在每个节点上运行。因此,如果您有很多节点,那么您将有很多代码执行,从而降低了图表的速度。
此处的文档:https://blog.zingchart.com/make-a-custom-tooltip/
此处演示:https://app.zingsoft.com/demos/create/T8WOXT5V
// window.onload event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
// Javascript code to execute after DOM content
// full ZingChart schema can be found here:
// https://www.zingchart.com/docs/api/json-configuration/
let chartConfig = {
type: 'scatter',
globals: {
fontSize: '14px'
},
title: {
text: 'A Simple Scatter Chart',
fontSize: '24px'
},
legend: {
cursor: 'hand',
draggable: true
},
// plot represents general series, or plots, styling
plot: {
// hoverstate
tooltip: {
// % symbol represents a token to insert a value. Full list here:
// https://www.zingchart.com/docs/tutorials/chart-elements/zingchart-tokens/
text: '%plot-text %kl was %v (°F)',
padding: '10px 15px',
borderRadius: '3px',
// htmlMode renders text attribute as html so
// ° is rendered
htmlMode: true
},
// animation docs here:
// https://www.zingchart.com/docs/tutorials/design-and-styling/chart-animation/#animation__effect
animation: {
effect: 'ANIMATION_SLIDE_TOP',
method: 'ANIMATION_BOUNCE_EASE_OUT',
sequence: 'ANIMATION_BY_PLOT',
speed: 375
},
lineWidth: '3px',
// line node styling
marker: {
borderWidth: '0px',
size: '6px',
rules: [
{
rule: '%v > 40',
backgroundColor: '#000'
},
{
rule: '%v < 20',
backgroundColor: '#000'
}
],
}
},
scaleX: {
// set scale label
label: {
text: 'Days'
},
// convert text on scale indices
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
scaleY: {
// scale label with unicode character
label: {
text: 'Temperature (°F)'
},
markers: [
{
type: 'line',
lineWidth:2,
range: [40],
label: {
text: 'Upper Tolerance'
}
},
{
type: 'line',
lineWidth:2,
range: [20],
label: {
text: 'Lower Tolerance'
}
}
]
},
series: [
{
values: [[1, 9], [2, 15], [3, 21], [4, 30], [5, 40], [6, 59], [7, 60], [8, 75], [9, 81], [10, 99]]
},
{
values: [[0.9, 3], [2.1, 13], [3.5, 25], [4.9, 35], [5.3, 41], [6.5, 57], [7.1, 61], [8.7, 70], [9.2, 82], [9.9, 95]]
},
{
values: [[0.1, 9], [1.8, 21], [1.9, 29], [4.1, 33], [4.5, 39], [6.9, 51], [7.4, 64], [8.9, 70], [9, 75], [9.3, 93]]
},
{
values: [[0.3, 11], [0.9, 15], [1.1, 24], [2.3, 29], [2.9, 30], [3.3, 35], [5.6, 67], [6.9, 70], [7.3, 71], [8.9, 90]]
},
{
values: [[0.5, 5], [1.9, 5], [2.5, 10], [3.1, 30], [6.5, 45], [6.9, 74], [7.2, 50], [7.8, 56], [8, 61], [8.5, 71]]
}
]
};
// render chart
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
});
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.chart--container {
min-height: 150px;
width: 100%;
height: 100%;
}
.zc-ref {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<!-- CHART CONTAINER -->
<div id="myChart" class="chart--container">
<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
</div>
</body>
</html>
关于javascript - Zingchar-使用散点图规则,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/56882482/