Zingchart-gaugechart 只显示第一节和最后一节
[英]Zingchart-gaugechart display first and last section only
问题描述
I using ZingChart to do gauge chart.
我使用 ZingChart 做仪表图。 The chart only display first and last section only.图表仅显示第一个和最后一个部分。 Two section missing in between.中间少了两节。 I have 5 values, but I want to display for 4 value only.我有 5 个值，但我只想显示 4 个值。 So, I created 4 rules for ring( arr_ringrules ) and plot( arr_plotrules ) and pass the rules arrays to object.因此，我为环（ arr_ringrules ）和绘图（ arr_plotrules ）创建了 4 条规则，并将规则 arrays 传递给 object。 But, only first and last section display in colour defined in rules.但是，只有第一个和最后一个部分以规则中定义的颜色显示。
$(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>
1 个解决方案
解决方案1
0 2021-12-31 09:16:36
Label R value:- Label R 值：-
start angle:end angle:scale
I have change this to 0:180:1我已将其更改为0:180:1
Scale R label- to display scale around the gauge chart标尺 R 标签 - 在仪表图周围显示标尺
I have change to我有改变
['0', '10', '20', '30', '40', '50', '60', '70', '80', '90', '100', '110', '120', '130', '140', '150', '160', '170', '180'].
Next, I calculate cumulative percentage value and cumulative degree from 180 and store in array while looping.接下来，我从 180 计算累积百分比值和累积度数，并在循环时存储在数组中。 I have used the cumulative degree to create the array object for ringrules, arr_ringrules_custom and plotrules, arr_plotrules_custom .我使用累积度为 ringrules、 arr_ringrules_custom和 plotrules、 arr_plotrules_custom 。
For my requirement, I want to display color section until section that have value 300. I have created colour_array contain four colours which I want set to display first four value from data array, d .根据我的要求，我想显示颜色部分，直到值为 300 的部分。我创建了 colour_array 包含四种颜色，我想将其设置为显示数据数组d中的前四个值。
data array,d = [150, 200, 250, 300, 400];-contain 5 items
colour_array = ["#11d8ee", "#3cc457", "#f12b0e", "#dda522"];-contain 4 items
I do validation on colour_array[index] show undefined inside data array loop in order to avoid create object for arr_ringrules_custom for last items on data. In else statement of this validation, I have created four objects and insert to我对colour_array[index] show undefined inside data array loop in order to avoid create object for arr_ringrules_custom for last items on data. In else statement of this validation, I have created four objects and insert to inside data array loop in order to avoid create object for arr_ringrules_custom for last items on data. In else statement of this validation, I have created four objects and insert to arr_ringrules_custom` in loop. inside data array loop in order to avoid create object for arr_ringrules_custom for last items on data. In else statement of this validation, I have created four objects and insert to arr_ringrules_custom`。
For arr_plotrules_custom, I have created 1 objects.对于 arr_plotrules_custom，我创建了 1 个对象。 The object created in if statement of validating colour_array[index]` show undefined.在验证 colour_array[index]` 的 if 语句中创建的 object 显示未定义。 It show undefined in last loop because colour_array[4] not exist.它在最后一个循环中显示未定义，因为 colour_array[4] 不存在。
obj_text = {
rule: '%v >= ' + prev_array_val,
'text': perc_array[(i - 1)] + '%'
}
I have use rule >= prev_array_val, angle for value 300 in order to show the label at center of chart.为了在图表中心显示 label，我使用 rule >= prev_array_val, angle for value 300 。 Since I want to show the percentage value, have stated perc_array[(i - 1)] + '%' .由于我想显示百分比值，因此已说明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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.