使用 jQuery 将 HTML 属性设置为 JSON 对象答案

【问题标题】：Set HTML attribute as JSON object using jQuery使用 jQuery 将 HTML 属性设置为 JSON 对象
【发布时间】：2018-12-25 17:48:19
【问题描述】：

我正在尝试设置 HTML 画布元素的属性，但该属性有一个值，它应该是一个数组。应该怎么做？请帮忙。

JavaScript：

var labels = ["January", "February", "March", "April", "May", "June", "July"];
var series = ['Series A', 'Series B'];
var data = [
  [65, 59, 80, 81, 56, 55, 40],
  [28, 48, 40, 19, 86, 27, 90]
];
var datasetOverride = [{yAxisID: 'y-axis-1'}, {yAxisID: 'y-axis-2'}];
var options = {
  scales: {
    yAxes: [{
        id: 'y-axis-1',
        type: 'linear',
        display: true,
        position: 'left'
      },
      {
        id: 'y-axis-2',
        type: 'linear',
        display: true,
        position: 'right'
      }
    ]
  }
};

尝试设置属性：

$('#line').attr("chart-data", data);
$('#line').attr("chart-labels", labels);
$('#line').attr("chart-series", series);
$('#line').attr("chart-options", datasetOverride );
$('#line').attr("chart-dataset-override", options);

HTML：

<canvas id="line" class="chart chart-line"></canvas>

【问题讨论】：

你说的是哪个属性？
设置并改为使用data()。属性值仅允许字符串，但您可以使用 data() 存储任何类型
@NelsonTeixeira 我想通过jquery绑定这个html元素绑定后应该是<canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels" chart-series="series" chart-options="options" chart-dataset-override="datasetOverride" chart-click="onClick">
@charlietfl 先生，你能举个例子吗

标签： javascript jquery html html5-canvas attr

【解决方案1】：

您可以通过多种方式做到这一点。其中之一是将它们转换为带有连接的字符串。像这样：

var data = [
            [65, 59, 80, 81, 56, 55, 40],
            [28, 48, 40, 19, 86, 27, 90]
        ];
var joined = data.join(',');
console.log(joined);
$('#line').attr("chart-data", joined);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="line">line</div>

请检查 div 元素。我使用了一个 div，所以你可以检查它，但它与 canvas 相同。

【讨论】：