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

Question

我用来绘制盾牌 UI 折线图的代码如下所示。将鼠标悬停在每个点上时，我可以获得标签 (Right/Wrong)。但我需要显示打印在图表上的标签 (Right/Wrong) 来代替 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>

Answer 1

您可以使用格式功能或直接修改任何给定点的文本。有关更多信息，请参见以下主题：

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

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

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

javascript

jquery

charts

linechart

shieldui