javascript - html 代码上的图表和操作

Question

我想对 html 代码进行操作。

我有这个代码:

<div id="LinesPlace" class="inlineBlock">
<div id="ExpensesId_2" class="width100 inlineBlock ExpensesViewList" style="border-top: 1px solid #dddddd;">
    <div class="width4 cbViewList">
        <span>
            <input type="checkbox" name="cbExpensesView[]" value="2" class="cbExpensesView" id="cbExpensesView_2">
        </span>
    </div>
    <div class="width26 categoryViewList">
        <span>
            <img id="" class=" floatA inlineBlock" src="/Interface/Images/ExampleCategory.png" alt="category icon">
        </span>
        <span class="E_CatName Food">Food</span>
    </div>
    <div class="width20 dateViewList"><span>14-09-2015</span></div>
        <div class="width20 amountViewList">
            <span>2 $</span>
        </div>
        <div class="width20 repeatedViewList">
            <span>Repeated: none</span>
        </div>
    <div class="width10 noteViewList" style=""></div>
</div>
<div id="ExpensesId_3" class="width100 inlineBlock ExpensesViewList" style="border-top: 1px solid #dddddd;">
    <div class="width4 cbViewList">
        <span>
            <input type="checkbox" name="cbExpensesView[]" value="2" class="cbExpensesView" id="cbExpensesView_3">
        </span>
    </div>
    <div class="width26 categoryViewList">
        <span>
            <img id="" class=" floatA inlineBlock" src="/Interface/Images/ExampleCategory.png" alt="category icon">
        </span>
        <span class="E_CatName Food">Food</span>
    </div>
    <div class="width20 dateViewList"><span>14-09-2015</span></div>
        <div class="width20 amountViewList">
            <span>2 $</span>
        </div>
        <div class="width20 repeatedViewList">
            <span>Repeated: none</span>
        </div>
    <div class="width10 noteViewList" style=""></div>
</div>

现在，如您所见，我有一个带有“LinesPlace”id 的 div，并且有很多 div(ExpensesId_2、ExpensesId_3...等等...)。

我想创建图表来获取所有类别类型(例如食物、电话等..)并获取所有金额，如果一个类别显示超过一次我们进行求和(例如，如果我们有 2 个食物)每行 2 美元，我需要在标签中获取食物，在数据中获取 4 美元)我得到了硬编码的示例:

var barData = {
                labels: ["Food","Phone","Clothing"],
                datasets: [{
                    fillColor: "#8f37b1",
                    strokeColor: "#8f37b1",
                    data: [100,155,500]
                }]
            }

我如何在 javascript/jQuery 中操作它以获得这样的效果？

请帮忙=]

问候， 小拉斐尔

Answer 1

要执行您的建议，您将需要使用脚本来解析页面的内容。好消息是您的 HTML 结构良好 - 您有重复的部分，其中包含分解数据的类和标签。

您要做的就是创建一个新的空数组和对象。我们将其称为 expenseArray 和 expenseTotals。创建一个像这样的 jQuery 选择器:

$("div.ExpensesViewList")

现在你有了一套可以支付所有费用的套装。您现在可以使用 .each 迭代该数组。

$("div.ExpensesViewList").each(function(){
    //Parse the contents of the Expense
    //Add the values you found from each item to a new object in expenseArray
    //Add values to any existing values in expenseTotals
});

//Add expenseTotals to expenseArray as a final element in expenseArray

您希望expenseArray 中的任何给定行与您为expenseTotals 创建的对象类型相同。完成后，这将成为数组中的最后一个条目。

现在您已将所有这些数据存储在一个对象数组中，您可以循环该数组并根据数据创建图表、图形或任何您想要的内容。

我必须问一个问题 - html 中的数据从哪里开始？如果它是由 Web 服务器上的某个脚本生成的，那么从服务器获取 json 格式的数据并跳过将其全部解析到页面之外会容易得多。如果您在页面中手动编码数据，那么创建一个数据数组，然后从数组创建 html 和图表会更有意义，而不是相反。