如何在charts.js的value字段中更新JS变量?

时间:2016-04-13 21:03:57

标签: javascript jquery charts chart.js

在页面加载时,会绘制一个charts.js图表​​(下面有更多内容)。我也有一些复选框,比如......

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Xml;
using System.Xml.Linq;

namespace ConsoleApplication1
{
    class Program
    {
        static void Main(string[] args)
        {
            string xml =
                "<?xml version=\"1.0\" encoding=\"utf-8\" ?>" +
                "<queries>" +
                  "<selectparent table=\"Associates\">\"SELECT * FROM @table\"</selectparent>" +
                  "<selectchild table=\"VehicleContract\">\"SELECT * FROM @table\"</selectchild>" +
                  "<addchild table=\"VehicleContract\" read=\"contractId, regNr, assoc_id, percentage, vehicleType, trailerNr\">\"INSERT into @table (contractId, regNr, assoc_id, percentage, vehicleType, trailerNr) VALUES (@id, @reg, @assort, @perc, @type, @trailer)\"</addchild>" +
                  "<updatechild table=\"VehicleContract\" read=\"contractId, regNr, assoc_id, percentage, vehicleType, trailerNr\">\"UPDATE @table SET regNr=@reg, assoc_id=@assort, percentage=@perc, vehicleType=@type, trailerNr=@trailer WHERE contractId=@id\"</updatechild>" +
                  "<removechild table=\"VehicleContract\" read=\"id\">\"DELETE from @table WHERE contractId=@id\"</removechild>" +
                "</queries>";

            XDocument doc = XDocument.Parse(xml);

            var results = doc.Elements("queries").Select(x => new
            {
                selectParent = x.Elements("selectparent").Select(y => new
                {
                    table = (string)y.Attribute("table"),
                    value = y.Value
                }).FirstOrDefault(),
                selectChild = x.Elements("selectchild").Select(y => new
                {
                    table = (string)y.Attribute("table"),
                    value = y.Value
                }).FirstOrDefault(),
                addChild = x.Elements("addchild").Select(y => new
                {
                    table = (string)y.Attribute("table"),
                    read = (string)y.Attribute("read"),
                    value = y.Value
                }).FirstOrDefault(),
                updateChild = x.Elements("updatechild").Select(y => new
                {
                    table = (string)y.Attribute("table"),
                    read = (string)y.Attribute("read"),
                    value = y.Value
                }).FirstOrDefault(),
                removeChild = x.Elements("removechild").Select(y => new
                {
                    table = (string)y.Attribute("table"),
                    read = (string)y.Attribute("read"),
                    value = y.Value
                }).FirstOrDefault(),
            }).FirstOrDefault();
        }
    }
}

我有这个JS用于创建变量,然后查看是否选中了复选框,然后保持值相同或者给它一个新值0.我还有一个updateBreakdown()函数,它会破坏图表和重新绘制它。

下面是我的chart.js图表​​代码。请注意,数据使用我的变量作为&#34;值&#34;。在页面加载时,图表创建正常。当我取消选中一个方框时,例如,&#34;&#34;&#34;在框中,something变量的值应该更改为0,因此,当重新绘制时,它不应占用图表上的任何空间。但总是出现25。

所以我可能错了,但我觉得我最初声明变量和/或我如何保持其范围有问题?

或许我只需要做一些不同的事情来制作chart.js数据&#34;刷新&#34;用作值的变量?

任何人都会看到我出错的地方?

            <input type="checkbox" id="something"  name="something" value="25" data-val="25" checked="checked" class="option">
            <label for="something">Something</label>

            <input type="checkbox" id="other"  name="other" value="5" data-val="5" checked="checked" class="option">
            <label for="other">Other</label>

1 个答案:

答案 0 :(得分:1)

在创建新图表之前,尝试为doughnutData提供新的配置数据。

function updateBreakdown() {

            // create the graph from scratch
            doughnutChart.destroy();
            var doughnutData = [
               {
                  value: something,
                  label: 'My something Label',
                  color: '#811BD6'
               },
               {
                  value: other,
                  label: 'My other label',
                  color: '#D18177'
               }
            ];
            doughnutChart = new Chart(ctx).Doughnut(doughnutData, {
                percentageInnerCutout: 55
            });

 }

并进行更改:

if ($('#something').is(':checked')) {
          //var something = 25;//replace these
            something = 25;//with these
      } else {
          //var something = 0;
            something = 0;
      }

       if ($('#other').is(':checked')) {
          //var other= 5;
            other= 5;
      } else {
          //var other= 0;
            other= 0;
      }