如何在Shield UI JavaScript折线图中添加自定义标签

How to add custom labels in a Shield UI JavaScript line chart

本文关键字：添加 自定义 标签 折线图 JavaScript Shield UI      更新时间：2023-09-26

我用于绘制Shield UI折线图的代码如下所示。悬停在每个点上，我就能得到标签（对/错）。但我需要显示图表上打印的标签（正确/错误），以代替数据值，如4,0,1,2,3,4等。

$(function() {
  $("#chart").shieldChart({
    chartAreaBorderColor: '#E8E8E8',
    theme: 'dark',
    chartAreaBorderWidth: 1,
    primaryHeader: {
      text: "Quiz Attendance"
    },
    exportOptions: {
      image: false
    },
    seriesSettings: {
      line: {
        dataPointText: {
          enabled: true,
          style: {
            fontWeight: "bold"
          }
        }
      }
    },
    tooltipSettings: {
      customHeaderText: "Your answer was:",
      customPointText: function(point, chart) {
        return shield.format(
          '<span><b>{value}</b></span>', {
            value: point.pointName
          }
        );
      }
    },
    axisY: {
      min: 0,
      max: 4 // four levels max
    },
    axisX: {
      categoricalValues: ['Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6', 'Q7', 'Q8', 'Q9', 'Q10', 'Q11', 'Q12', 'Q13', 'Q14', 'Q15', 'Q16']
    },
    dataSeries: [{
      seriesType: 'line',
      color: "#FFD500",
      collectionAlias: 'Your quiz attendance',
      data: [{
        y: 4,
        pointName: "Right"
      }, {
        y: 0,
        pointName: "Right"
      }, {
        y: 1,
        pointName: "Right"
      }, {
        y: 2,
        pointName: "Right"
      }, {
        y: 3,
        pointName: "Right"
      }, {
        y: 4,
        pointName: "Right"
      }, {
        y: 3,
        pointName: "Wrong"
      }, {
        y: 2,
        pointName: "Wrong"
      }, {
        y: 1,
        pointName: "Wrong"
      }, {
        y: 0,
        pointName: "Wrong"
      }, {
        y: 1,
        pointName: "Right"
      }, {
        y: 2,
        pointName: "Right"
      }, {
        y: 3,
        pointName: "Right"
      }, {
        y: 4,
        pointName: "Right"
      }, {
        y: 4,
        pointName: "Right"
      }, {
        y: 3,
        pointName: "Wrong"
      }]
    }]
  });
});
<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <title>Altoopa Research and Concepts Private Limited</title>
  <link id="themecss" rel="stylesheet" type="text/css" href="http://www.shieldui.com/shared/components/latest/css/light-bootstrap/all.min.css" />
  <script type="text/javascript" src="http://www.shieldui.com/shared/components/latest/chart/js/jquery-1.9.1.min.js"></script>
  <script type="text/javascript" src="http://www.shieldui.com/shared/components/latest/chart/js/shield-chart.all.min.js"></script>
</head>
<body>
  <div style="width: 960px; min-height: 500px; margin: 0 auto;">
    <div id="chart"></div>
  </div>
</body>
</html>

您可以使用格式化函数或直接修改任何给定点的文本。有关这方面的更多信息，请参阅以下主题：

https://www.shieldui.com/documentation/components/javascript/shieldui.chart/api/seriesSettings/line/dataPointText/format

相关文章：