Zingchar - 将规则与散点图一起使用

Question

我正在使用 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
            }
        };

这是我的图表的样子：

Answer 1

快速修复

您需要将 rules 移动到 plot.marker 对象中，并且您需要将 scatter-color 更改为 backgroundColor。

条件样式

您可以通过两种方式实现条件样式：

1. rules
2. jsRule

---

rules 属性

像上面那样定义一个规则，它会在每个节点上 运行 一个 if 语句。您可以使用多个规则和一种简单的语义方式来定义条件样式。

• 此处的文档：https://www.zingchart.com/docs/tutorials/elements/rules
• 此处演示：https://app.zingsoft.com/demos/create/J6W2EALF

jsRule属性

Javascript 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>