Zingchart-gaugechart 只显示第一节和最后一节答案

【问题标题】：Zingchart-gaugechart display first and last section onlyZingchart-gaugechart 只显示第一节和最后一节
【发布时间】：2021-12-30 02:36:26
【问题描述】：

我使用 ZingChart 做仪表图。图表仅显示第一个和最后一个部分。中间少了两节。我有 5 个值，但我只想显示 4 个值。因此，我为 ring(arr_ringrules) 和 plot(arr_plotrules) 创建了 4 条规则，并将规则数组传递给对象。但是，只有第一个和最后一个部分以规则中定义的颜色显示。

$(document).ready(function() {
  window.feed = function(callback) {
    var tick = {};
    tick.plot0 = Math.ceil(350 + (Math.random() * 500));
    callback(JSON.stringify(tick));
  };
  d = [150, 200, 250, 300, 400];

  let sum = d.reduce(function(a, b) {
    return a + b;
  }, 0);

  perc_array = [];
  perc_rulescolor = []
  colour_array = ["#11d8ee", "#3cc457", "#f12b0e", "#dda522"];

  perc = '';
  for (i = 0; i < d.length; i++) {
    perc = parseInt((d[i] / sum) * 100);

    perc_array.push(perc);

    if (typeof colour_array[i] === 'undefined') {

    } else {
      if (i == 0) {
        obj_color = {
          rule: "%v < " + perc + " && %v >= 0",
          'backgroundColor': colour_array[i]
        };
      } else {
        prev_array_val = perc_array[(i - 1)];
        console.log(prev_array_val + '=>' + perc);
        obj_color = {
          rule: "%v < " + perc + " && %v >= " + prev_array_val,
          'backgroundColor': colour_array[i]
        }
      }
      perc_rulescolor.push(obj_color);
    }
  }
  arr_ringrules = [{
      rule: '%v >= 0 && %v < 11.54',
      backgroundColor: '#0cf311'
    },
    {
      rule: '%v >= 11.54 && %v < 15.38',
      backgroundColor: '#eaf50a'
    },
    {
      rule: '%v >= 15.38 && %v < 19.23',
      backgroundColor: '#db7b24'
    },
    {
      rule: '%v >= 19.23 && %v < 23.08',
      backgroundColor: '#ff0000'
    }
  ];
  arr_plotrules = [{
      rule: '%v >= 0 && %v < 11.54',
      text: '%v<br>EXCELLENT'
    },
    {
      rule: '%v >= 11.54 && %v < 15.38',
      text: '%v<br>Good'
    },
    {
      rule: '%v >= 15.38 && %v < 19.23',
      text: '%v<br>Fair'
    },
    {
      rule: '%v >= 19.23 && %v < 23.08',
      text: '%v<br>Bad'
    }
  ];

  var myConfig = {
    type: "gauge",
    globals: {
      fontSize: 25
    },
    plotarea: {
      marginTop: 80
    },
    plot: {
      size: '100%',
      valueBox: {
        placement: 'center',
        text: '%v', //default
        fontSize: 35,
        rules: arr_plotrules

      }
    },
    tooltip: {
      borderRadius: 5
    },
    scaleR: {
      aperture: 180,
      values: "0:100:20",
      center: {
        visible: false
      },
      tick: {
        visible: false
      },
      item: {
        offsetR: 0,
        rules: [{
          rule: '%i == 9',
          offsetX: 15
        }]
      },
      labels: ['0', '20', '40', '60', '80', '100'],
      ring: {
        size: 100,
        rules: arr_ringrules
      }
    },

    series: [{
      values: [80], // starting value
      backgroundColor: 'black',
      indicator: [10, 10, 10, 10, 0.75],
      animation: {
        effect: 2,
        method: 1,
        sequence: 4,
        speed: 900
      },
    }]
  };
  zingchart.render({
    id: 'myChart',
    data: myConfig,
    height: 500,
    width: '100%'
  });
})

html,
body {
  height: 100%;
  width: 100%;
}

#myChart {
  height: 100%;
  width: 100%;
  min-height: 150px;
}

.zc-ref {
  display: none;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body>
  <div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Charts by ZingChart</a></div>
</body>

</html>

【问题讨论】：

标签： javascript charts gauge zingchart

【解决方案1】：

标签R值：-

开始角度：结束角度：比例

我已将其更改为 0:180:1

Scale R 标签-在仪表图周围显示比例

我要改

['0', '10', '20', '30', '40', '50', '60', '70', '80', '90', '100', '110', '120', '130', '140', '150', '160', '170', '180'].

接下来，我从 180 计算累积百分比值和累积度数，并在循环时存储在数组中。我已经使用累积度为 ringrules,arr_ringrules_custom 和 plotrules,arr_plotrules_custom 创建了数组对象。

根据我的要求，我想显示颜色部分，直到值为 300 的部分。我创建了 colour_array 包含四种颜色，我想将它们设置为显示数据数组中的前四个值，d。

data array,d = [150, 200, 250, 300, 400];-contain 5 items
colour_array = ["#11d8ee", "#3cc457", "#f12b0e", "#dda522"];-contain 4 items

我在数据数组循环内对colour_array[index] show undefined 进行验证，以避免为数据上的最后一项创建 arr_ringrules_custom 对象。在此验证的 else 语句中，我创建了四个对象并在循环中插入到 arr_ringrules_custom。

对于 arr_plotrules_custom，我创建了 1 个对象。在验证 colour_array[index] show undefined 的 if 语句中创建的对象。它在最后一个循环中显示未定义，因为 colour_array[4] 不存在。

obj_text = {
    rule: '%v >= ' + prev_array_val,
    'text': perc_array[(i - 1)] + '%'
  }

我使用规则 >= prev_array_val, angle for value 300 以便在图表中心显示标签。由于我要显示百分比值，所以声明了perc_array[(i - 1)] + '%'。

$(document).ready(function() {
  window.feed = function(callback) {
    var tick = {};
    tick.plot0 = Math.ceil(350 + (Math.random() * 500));
    callback(JSON.stringify(tick));
  };
  d = [150, 200, 250, 300, 400];
  let sum = d.reduce(function(a, b) {
    return a + b;
  }, 0);
  perc_array = [];
  degree_array = [];
  arr_ringrules_custom = [];
  arr_plotrules_custom = [];
  colour_array = ["#11d8ee", "#3cc457", "#f12b0e", "#dda522"];

  //calculate percentage
  var perc = 0;
  var degree = 0;
  for (i = 0; i < d.length; i++) {
    perc += parseFloat((d[i] / sum * 100).toFixed(2));
    perc_array.push(perc);
    degree += parseFloat(((d[i] / sum) * 180).toFixed(2)); //calculating degree

    degree_array.push(degree);
    if (typeof colour_array[i] === 'undefined') {

      prev_array_val = parseFloat(degree_array[(i - 1)]).toFixed(2);
      obj_text = {
        rule: '%v >= ' + prev_array_val,
        'text': perc_array[(i - 1)] + '%'
      }
      arr_plotrules_custom.push(obj_text);
    } else {
      if (i == 0) {
        obj_color = {
          rule: '%v >= 0 && %v < ' + degree,
          'backgroundColor': colour_array[i]
        };
      } else {
        prev_array_val = parseFloat(degree_array[(i - 1)]).toFixed(2);
        obj_color = {
          rule: '%v >= ' + prev_array_val + ' && %v < ' + degree,
          'backgroundColor': colour_array[i]
        }
      }
      arr_ringrules_custom.push(obj_color);
    }
  }
  console.log(arr_plotrules_custom);
  end_mark = parseFloat(degree_array[(colour_array.length - 1)].toFixed(2));
  var myConfig = {
    type: "gauge",
    globals: {
      fontSize: 25
    },
    plotarea: {
      marginTop: 80
    },
    plot: {
      size: '100%',
      valueBox: {
        placement: 'center',
        text: '%v', //default
        fontSize: 35,
        rules: arr_plotrules_custom
      }
    },
    tooltip: {
      borderRadius: 5
    },
    scaleR: {
      aperture: 180,
      values: "0:180:1",
      center: {
        visible: false
      },
      tick: {
        visible: false
      },
      item: {
        offsetR: 0,
        rules: [{
          rule: '%i == 9',
          offsetX: 15
        }]
      },
      labels: ['0', '10', '20', '30', '40', '50', '60', '70', '80', '90', '100', '110', '120', '130', '140', '150', '160', '170', '180'],
      ring: {
        size: 100,
        rules: arr_ringrules_custom
      }
    },
    series: [{
      values: [end_mark], // starting value
      backgroundColor: 'black',
      indicator: [10, 10, 10, 10, 0.75],
      animation: {
        effect: 2,
        method: 1,
        sequence: 4,
        speed: 900
      },
    }]
  };
  zingchart.render({
    id: 'myChart',
    data: myConfig,
    height: 500,
    width: '100%'
  });
})

html,
body {
  height: 100%;
  width: 100%;
}

#myChart {
  height: 100%;
  width: 100%;
  min-height: 150px;
}

.zc-ref {
  display: none;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="jQuery/jquery-3.4.1.min.js"></script>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Charts by ZingChart</a></div>
</body>

</html>

【讨论】：