时间戳

首页 > 解决方案 > 如何从标签图表js中获取线x值

c# - 如何从标签图表js中获取线x值

问题描述

我想在 js 中创建一个图表。我通过从 sql 中选择数据并获取条件来从 Label 中获取标签行 x 的值，但是当我设置时labels = Label，图表不显示。
请帮助我，我试图尝试每一个建议。

lbldate.Text = lbldate.Text + D1 + "," + D2 + "," + D3 + "," + D4+",";

 <script type="text/javascript">

          var ldate = $('[id*=lbldate]').val();

          var config = {
              type: 'line',
              data: {
                  labels: ldate,
                  datasets: [{
                      label: "My First dataset",
                      data: [65, 40, 80, 81, 56, 85, 45],
                      backgroundColor: "rgba(255,99,132,0.2)",
                  }, {
                      label: "My Second dataset",
                      data: [40, 80, 21, 56, 85, 45, 65],
                      backgroundColor: "rgba(99,255,132,0.2)",
                  }]
              },
              scales: {
                  xAxes: [{
                      gridLines: {
                          display: false,
                          lineWidth: 1,
                          zeroLineWidth: 1,
                          zeroLineColor: '#666666',
                          drawTicks: false
                      },
                      ticks: {
                          display: true,
                          stepSize: 0,
                          min: 0,
                          autoSkip: false,
                          fontSize: 11,
                          padding: 12
                      }
                  }],
                  yAxes: [{
                      ticks: {
                          padding: 5
                      },
                      gridLines: {
                          display: true,
                          lineWidth: 1,
                          zeroLineWidth: 2,
                          zeroLineColor: '#666666'
                      }
                  }]
              },
              spanGaps: true,
              responsive: true,
              maintainAspectRatio: true
          };

          var ctx = document.getElementById("myChart").getContext("2d");
          new Chart(ctx, config);
  </script>
<asp:Label ID="lbldate" runat="server" Text=""></asp:Label>

<div class="myChart">
<canvas id="myChart"></canvas>
</div>

标签： c#chartschart.js

解决方案

检查创建新图表https://www.chartjs.org/docs/latest/developers/charts.html，您缺少选项，结构应如下所示：

    new Chart(ctx, {
        type: 'MyType',
        data: data,
        options: options
    });

接下来是你发送到图表的标签应该在数组中，你不能像labels: something它应该那样写labels: [something]，因为它试图用标签映射数组并且你没有数组，然后它会重现错误。

推荐阅读