个人中心
文章发布
退出
作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库？
- java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
26
4
我有一个简单的输入表单，用户可以使用它通过下拉菜单/选择器输入数据。有 10 个问题，每个问题的评分都是 10 分。
然后，此数据会填充同一页面上的 Google 图。
数据很好地填充了图表，但轴本身变得无序。所以 2 可能在顶部，10 在中间，依此类推。我不知道为什么轴会像这样“断裂”。
请注意，我对 Java 和一点 HTML 的经验很少，这只是我想学习但无法在任何地方找到答案，或者至少，当我看到答案时无法识别!
有人可以帮忙吗？
<!doctype HTML>
<html`enter code here` lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
</title>
<head>
<style>
</style>
</head>
<body>
<h1>REPORT CARD</h1>
<br>
<form role="form" id="price" name="price">
<p><b>The brand excels</b></p>
<select class="custom-select" style="width:100pt; height:30pt; font-size:15px; color:grey; float:right;" id="DB" onchange="drawChart()">
<option id="itemprice" color="green" value="">Please choose</placeholder>
<option id="itemprice" value="1" >1 </option>
<option id="itemprice" value="2">2</option>
<option id="itemprice" value="3">3</option>
<option id="itemprice" value="4">4</option>
<option id="itemprice" value="5">5</option>
<option id="itemprice" value="6">6</option>
<option id="itemprice" value="7">7</option>
<option id="itemprice" value="8">8</option>
<option id="itemprice" value="9">9</option>
<option id="itemprice" value="10">10</option>
</select>
<br>
<p>Relevance:</p>
<select class="custom-select" style="width:100pt; height:30pt; font-size:15px; color:grey;float:right" id="RLV" onchange="drawChart()">
<option id="itemprice" value="">Please choose</placeholder>
<option id="itemprice" value="1" >1 </option>
<option id="itemprice" value="2">2</option>
<option id="itemprice" value="3">3</option>
<option id="itemprice" value="4">4</option>
<option id="itemprice" value="5">5</option>
<option id="itemprice" value="6">6</option>
<option id="itemprice" value="7">7</option>
<option id="itemprice" value="8">8</option>
<option id="itemprice" value="9">9</option>
<option id="itemprice" value="10">10</option>
</select>
</p>
<br>
<p>Pricing related to Value:</p>
<select class="custom-select" style="width:100pt; height:30pt; font-size:15px;color:grey ;float:right" id="PRV" onchange="drawChart()">
<option id="itemprice" value="">Please choose</placeholder>
<option id="itemprice" value="1" >1 </option>
<option id="itemprice" value="2">2</option>
<option id="itemprice" value="3">3</option>
<option id="itemprice" value="4">4</option>
<option id="itemprice" value="5">5</option>
<option id="itemprice" value="6">6</option>
<option id="itemprice" value="7">7</option>
<option id="itemprice" value="8">8</option>
<option id="itemprice" value="9">9</option>
<option id="itemprice" value="10">10</option>
</select>
</p>
<br>
<p>Positioning:</p>
<select class="custom-select" style="width:100pt; height:30pt; font-size:15px; color:grey;float:right" id="PSN" onchange="drawChart()">
<option id="itemprice" value="">Please choose</placeholder>
<option id="itemprice" value="1" >1 </option>
<option id="itemprice" value="2">2</option>
<option id="itemprice" value="3">3</option>
<option id="itemprice" value="4">4</option>
<option id="itemprice" value="5">5</option>
<option id="itemprice" value="6">6</option>
<option id="itemprice" value="7">7</option>
<option id="itemprice" value="8">8</option>
<option id="itemprice" value="9">9</option>
<option id="itemprice" value="10">10</option>
</select>
</p>
<br>
<p>Consistency:</p>
<select class="custom-select" style="width:100pt; height:30pt; font-size:15px;color:grey;float:right " id="CNS" onchange="drawChart()">
<option id="itemprice" value="">Please choose</placeholder>
<option id="itemprice" value="1" >1 </option>
<option id="itemprice" value="2">2</option>
<option id="itemprice" value="3">3</option>
<option id="itemprice" value="4">4</option>
<option id="itemprice" value="5">5</option>
<option id="itemprice" value="6">6</option>
<option id="itemprice" value="7">7</option>
<option id="itemprice" value="8">8</option>
<option id="itemprice" value="9">9</option>
<option id="itemprice" value="10">10</option>
</select>
</p>
<br>
<p>Brand Portfolio:</p>
<select class="custom-select" style="width:100pt; height:30pt; font-size:15px;color:grey;float:right " id="BP" onchange="drawChart()">
<option id="itemprice" value="">Please choose</placeholder>
<option id="itemprice" value="1" >1 </option>
<option id="itemprice" value="2">2</option>
<option id="itemprice" value="3">3</option>
<option id="itemprice" value="4">4</option>
<option id="itemprice" value="5">5</option>
<option id="itemprice" value="6">6</option>
<option id="itemprice" value="7">7</option>
<option id="itemprice" value="8">8</option>
<option id="itemprice" value="9">9</option>
<option id="itemprice" value="10">10</option>
</select>
</p>
<br>
<p>Marketing Activities:</p>
<select class="custom-select" style="width:100pt; height:30pt; font-size:15px;color:grey;float:right " id="MA" onchange="drawChart()">
<option id="itemprice" value="">Please choose</placeholder>
<option id="itemprice" value="1" >1 </option>
<option id="itemprice" value="2">2</option>
<option id="itemprice" value="3">3</option>
<option id="itemprice" value="4">4</option>
<option id="itemprice" value="5">5</option>
<option id="itemprice" value="6">6</option>
<option id="itemprice" value="7">7</option>
<option id="itemprice" value="8">8</option>
<option id="itemprice" value="9">9</option>
<option id="itemprice" value="10">10</option>
</select>
</p>
<br>
<p>Brand Meaning:</p>
<select class="custom-select" style="width:100pt; height:30pt; font-size:15px;color:grey;float:right " id="BM" onchange="drawChart()">
<option id="itemprice" value="">Please choose</placeholder>
<option id="itemprice" value="1" >1 </option>
<option id="itemprice" value="2">2</option>
<option id="itemprice" value="3">3</option>
<option id="itemprice" value="4">4</option>
<option id="itemprice" value="5">5</option>
<option id="itemprice" value="6">6</option>
<option id="itemprice" value="7">7</option>
<option id="itemprice" value="8">8</option>
<option id="itemprice" value="9">9</option>
<option id="itemprice" value="10">10</option>
</select>
</p>
<br>
<p>Support of the Brand:</p>
<select class="custom-select" style="width:100pt; height:30pt; font-size:15px;color:grey;float:right " id="SOB" onchange="drawChart()">
<option id="itemprice" value="">Please choose</placeholder>
<option id="itemprice" value="1" >1 </option>
<option id="itemprice" value="2">2</option>
<option id="itemprice" value="3">3</option>
<option id="itemprice" value="4">4</option>
<option id="itemprice" value="5">5</option>
<option id="itemprice" value="6">6</option>
<option id="itemprice" value="7">7</option>
<option id="itemprice" value="8">8</option>
<option id="itemprice" value="9">9</option>
<option id="itemprice" value="10">10</option>
</select>
</p>
<br>
<p>Brand Equity:</p>
<select class="custom-select" style="width:100pt; height:30pt; text-align: center; font-size:15px;color:grey;float:right " id="BE" onchange="drawChart()">
<option id="itemprice" value="">Please choose</placeholder>
<option id="itemprice" value="1" >1 </option>
<option id="itemprice" value="2">2</option>
<option id="itemprice" value="3">3</option>
<option id="itemprice" value="4">4</option>
<option id="itemprice" value="5">5</option>
<option id="itemprice" value="6">6</option>
<option id="itemprice" value="7">7</option>
<option id="itemprice" value="8">8</option>
<option id="itemprice" value="9">9</option>
<option id="itemprice" value="10">10</option>
</select>
</p>
</form>
<br> </br><br> </br>
</body>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Metrics','Delivering Benefits','Relevance', 'Pricing related to Value','Positioning','Consistency', 'Brand Portfolio','Marketing Activities','Brand Meaning', 'Support of the Brand', 'Brand Equity'],
[" ",
value=document.getElementById("DB").value,
value=document.getElementById("RLV").value,
value=document.getElementById("PRV").value,
value=document.getElementById("PSN").value,
value=document.getElementById("CNS").value,
value=document.getElementById("BP").value,
value=document.getElementById("MA").value,
value=document.getElementById("BM").value,
value=document.getElementById("SOB").value,
value=document.getElementById("BE").value,],
]);
var options = {
chart: {
title: 'XYZ',
subtitle: '',
},
bars: 'vertical' // Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
</head>
<body>
<div id="barchart_material" style="width: 1000px; height: 500px;"></div>
</body>
</html>最佳答案
y 轴上的数据乱序，因为图表数据中使用了 string 值，
而不是 number 值
要更正，您可以使用 parseInt 将字符串转换为数字。
[" ",
parseInt(document.getElementById("DB").value),
parseInt(document.getElementById("RLV").value),
parseInt(document.getElementById("PRV").value),
parseInt(document.getElementById("PSN").value),
parseInt(document.getElementById("CNS").value),
parseInt(document.getElementById("BP").value),
parseInt(document.getElementById("MA").value),
parseInt(document.getElementById("BM").value),
parseInt(document.getElementById("SOB").value),
parseInt(document.getElementById("BE").value)],
请参阅以下工作片段...
<!doctype HTML>
<html`enter code here` lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
</title>
<head>
<style>
</style>
</head>
<body>
<h1>REPORT CARD</h1>
<br>
<form role="form" id="price" name="price">
<p><b>The brand excels</b></p>
<select class="custom-select" style="width:100pt; height:30pt; font-size:15px; color:grey; float:right;" id="DB" onchange="drawChart()">
<option id="itemprice" color="green" value="">Please choose</placeholder>
<option id="itemprice" value="1" >1 </option>
<option id="itemprice" value="2">2</option>
<option id="itemprice" value="3">3</option>
<option id="itemprice" value="4">4</option>
<option id="itemprice" value="5">5</option>
<option id="itemprice" value="6">6</option>
<option id="itemprice" value="7">7</option>
<option id="itemprice" value="8">8</option>
<option id="itemprice" value="9">9</option>
<option id="itemprice" value="10">10</option>
</select>
<br>
<p>Relevance:</p>
<select class="custom-select" style="width:100pt; height:30pt; font-size:15px; color:grey;float:right" id="RLV" onchange="drawChart()">
<option id="itemprice" value="">Please choose</placeholder>
<option id="itemprice" value="1" >1 </option>
<option id="itemprice" value="2">2</option>
<option id="itemprice" value="3">3</option>
<option id="itemprice" value="4">4</option>
<option id="itemprice" value="5">5</option>
<option id="itemprice" value="6">6</option>
<option id="itemprice" value="7">7</option>
<option id="itemprice" value="8">8</option>
<option id="itemprice" value="9">9</option>
<option id="itemprice" value="10">10</option>
</select>
</p>
<br>
<p>Pricing related to Value:</p>
<select class="custom-select" style="width:100pt; height:30pt; font-size:15px;color:grey ;float:right" id="PRV" onchange="drawChart()">
<option id="itemprice" value="">Please choose</placeholder>
<option id="itemprice" value="1" >1 </option>
<option id="itemprice" value="2">2</option>
<option id="itemprice" value="3">3</option>
<option id="itemprice" value="4">4</option>
<option id="itemprice" value="5">5</option>
<option id="itemprice" value="6">6</option>
<option id="itemprice" value="7">7</option>
<option id="itemprice" value="8">8</option>
<option id="itemprice" value="9">9</option>
<option id="itemprice" value="10">10</option>
</select>
</p>
<br>
<p>Positioning:</p>
<select class="custom-select" style="width:100pt; height:30pt; font-size:15px; color:grey;float:right" id="PSN" onchange="drawChart()">
<option id="itemprice" value="">Please choose</placeholder>
<option id="itemprice" value="1" >1 </option>
<option id="itemprice" value="2">2</option>
<option id="itemprice" value="3">3</option>
<option id="itemprice" value="4">4</option>
<option id="itemprice" value="5">5</option>
<option id="itemprice" value="6">6</option>
<option id="itemprice" value="7">7</option>
<option id="itemprice" value="8">8</option>
<option id="itemprice" value="9">9</option>
<option id="itemprice" value="10">10</option>
</select>
</p>
<br>
<p>Consistency:</p>
<select class="custom-select" style="width:100pt; height:30pt; font-size:15px;color:grey;float:right " id="CNS" onchange="drawChart()">
<option id="itemprice" value="">Please choose</placeholder>
<option id="itemprice" value="1" >1 </option>
<option id="itemprice" value="2">2</option>
<option id="itemprice" value="3">3</option>
<option id="itemprice" value="4">4</option>
<option id="itemprice" value="5">5</option>
<option id="itemprice" value="6">6</option>
<option id="itemprice" value="7">7</option>
<option id="itemprice" value="8">8</option>
<option id="itemprice" value="9">9</option>
<option id="itemprice" value="10">10</option>
</select>
</p>
<br>
<p>Brand Portfolio:</p>
<select class="custom-select" style="width:100pt; height:30pt; font-size:15px;color:grey;float:right " id="BP" onchange="drawChart()">
<option id="itemprice" value="">Please choose</placeholder>
<option id="itemprice" value="1" >1 </option>
<option id="itemprice" value="2">2</option>
<option id="itemprice" value="3">3</option>
<option id="itemprice" value="4">4</option>
<option id="itemprice" value="5">5</option>
<option id="itemprice" value="6">6</option>
<option id="itemprice" value="7">7</option>
<option id="itemprice" value="8">8</option>
<option id="itemprice" value="9">9</option>
<option id="itemprice" value="10">10</option>
</select>
</p>
<br>
<p>Marketing Activities:</p>
<select class="custom-select" style="width:100pt; height:30pt; font-size:15px;color:grey;float:right " id="MA" onchange="drawChart()">
<option id="itemprice" value="">Please choose</placeholder>
<option id="itemprice" value="1" >1 </option>
<option id="itemprice" value="2">2</option>
<option id="itemprice" value="3">3</option>
<option id="itemprice" value="4">4</option>
<option id="itemprice" value="5">5</option>
<option id="itemprice" value="6">6</option>
<option id="itemprice" value="7">7</option>
<option id="itemprice" value="8">8</option>
<option id="itemprice" value="9">9</option>
<option id="itemprice" value="10">10</option>
</select>
</p>
<br>
<p>Brand Meaning:</p>
<select class="custom-select" style="width:100pt; height:30pt; font-size:15px;color:grey;float:right " id="BM" onchange="drawChart()">
<option id="itemprice" value="">Please choose</placeholder>
<option id="itemprice" value="1" >1 </option>
<option id="itemprice" value="2">2</option>
<option id="itemprice" value="3">3</option>
<option id="itemprice" value="4">4</option>
<option id="itemprice" value="5">5</option>
<option id="itemprice" value="6">6</option>
<option id="itemprice" value="7">7</option>
<option id="itemprice" value="8">8</option>
<option id="itemprice" value="9">9</option>
<option id="itemprice" value="10">10</option>
</select>
</p>
<br>
<p>Support of the Brand:</p>
<select class="custom-select" style="width:100pt; height:30pt; font-size:15px;color:grey;float:right " id="SOB" onchange="drawChart()">
<option id="itemprice" value="">Please choose</placeholder>
<option id="itemprice" value="1" >1 </option>
<option id="itemprice" value="2">2</option>
<option id="itemprice" value="3">3</option>
<option id="itemprice" value="4">4</option>
<option id="itemprice" value="5">5</option>
<option id="itemprice" value="6">6</option>
<option id="itemprice" value="7">7</option>
<option id="itemprice" value="8">8</option>
<option id="itemprice" value="9">9</option>
<option id="itemprice" value="10">10</option>
</select>
</p>
<br>
<p>Brand Equity:</p>
<select class="custom-select" style="width:100pt; height:30pt; text-align: center; font-size:15px;color:grey;float:right " id="BE" onchange="drawChart()">
<option id="itemprice" value="">Please choose</placeholder>
<option id="itemprice" value="1" >1 </option>
<option id="itemprice" value="2">2</option>
<option id="itemprice" value="3">3</option>
<option id="itemprice" value="4">4</option>
<option id="itemprice" value="5">5</option>
<option id="itemprice" value="6">6</option>
<option id="itemprice" value="7">7</option>
<option id="itemprice" value="8">8</option>
<option id="itemprice" value="9">9</option>
<option id="itemprice" value="10">10</option>
</select>
</p>
</form>
<br> </br><br> </br>
</body>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Metrics','Delivering Benefits','Relevance', 'Pricing related to Value','Positioning','Consistency', 'Brand Portfolio','Marketing Activities','Brand Meaning', 'Support of the Brand', 'Brand Equity'],
[" ",
parseInt(document.getElementById("DB").value),
parseInt(value=document.getElementById("RLV").value),
parseInt(value=document.getElementById("PRV").value),
parseInt(value=document.getElementById("PSN").value),
parseInt(value=document.getElementById("CNS").value),
parseInt(value=document.getElementById("BP").value),
parseInt(value=document.getElementById("MA").value),
parseInt(value=document.getElementById("BM").value),
parseInt(value=document.getElementById("SOB").value),
parseInt(value=document.getElementById("BE").value)],
]);
var options = {
chart: {
title: 'XYZ',
subtitle: '',
},
bars: 'vertical' // Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
</head>
<body>
<div id="barchart_material" style="width: 1000px; height: 500px;"></div>
</body>
</html>注意:不需要value=...
关于javascript - Google Graphs 轴顺序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52580166/
26
4
0
我正在创建一个有效的突变，但我不确定它是否按照我认为的方式工作。但是，我想知道执行顺序是什么？ 异步 从上到下同步 同步随机顺序 其他 我想确保在执行插入/更新插入之前从表中删除某些项目。使用以下突变
如何更改规则中的前提顺序？ 例如，在伊莎贝尔的自然演绎规则中: mp: ?P ⟶ ?Q ⟹ ?P ⟹ ?Q 我们可以将顺序更改为: ?P ⟹ ?P ⟶ ?Q ⟹ ?Q 我可以用 rev_mp或者定义一
关闭。这个问题需要details or clarity .它目前不接受答案。 想改善这个问题吗？通过 editing this post 添加详细信息并澄清问题. 8年前关闭。 Improve thi
我正在使用 Hibernate 3.2，并使用标准来构建查询。我想为多对一关联添加和“排序”，但我不知道如何做到这一点。 Hibernate 查询最终看起来像这样，我猜: select t1.a, t
我正在开发一个项目，但无法让我的 javascript 按顺序工作。我知道 javascript 可以并行执行任务，因此当您向不响应的服务器发出请求时，它不会被卡住。这有它的优点和缺点。就我而言，这是
在下面的代码中，我认为f1 > f2 > f3是调用顺序，但是仅f1被调用。如何获得依次调用的3个函数？ 我已经将以下内容添加到main函数中，它可以按预期工作，但是我想知道是否还有其他确定的方法可以
我有一个如下所示的对象数组: [{ "id": 1, "Size": 90, "Maturity": 24, }, { "id": 2, "S
这是征求意见和要求的请求。我是Docker的新手。 我想要一个用于Python项目的生产和开发容器(可能也进行单元测试)。我的搜索指向多阶段Dockerfile(以及运行它们的多个docker-com
我想知道解决以下问题的有效方法是什么: 假设我在组 1 中有三个字符，在组 2 中有两个字符: group_1 = c("X", "Y", "Z") group_2 = c("A", "B") 显然，
在 Cordova 网站上，您可以看到一长串按字母顺序排列的钩子(Hook)列表，但它们触发和执行的正确顺序是什么？ 我正在尝试在构建/编译之前将 cordova.js 脚本添加到 index.htm
我想知道解决以下问题的有效方法是什么: 假设我在组 1 中有三个字符，在组 2 中有两个字符: group_1 = c("X", "Y", "Z") group_2 = c("A", "B") 显然，
这个问题已经有答案了: 奥 git _a (2 个回答) 已关闭 9 年前。 这是我的一个练习的代码， public class RockTest { public static void main(
我使用 HashMap 来存储一些数据，但每当新数据保存到 HashMap 或旧数据移出 HashMap 时，我都需要将其保持升序。但是hashmap本身不支持顺序，我可以使用什么数据结构来支持顺序？
我想创建一个序列，当星期几与函数参数中的日期相同时，它会返回所有年份的结果(例如:自开始日期起，2 月 12 日为星期日的所有年份)。 let myDate (dw:System.DayOfWeek)
我有一个包含许多元素的 Xelement。 我有以下代码来对它们进行排序: var calculation = from y in x.Elements("row")
假设我有: 在 javacript 文件中，我为类按钮和 ID 名称定义了点击操作，例如: $("#name").click(function(event){ alert("hi"); }) $
我有一个包含 2 个 subview 的 View - collectionView 和自定义 View 。我想设置一个操作在布置 2 个 View 后运行，但layoutSubViews 运行了两次
关闭。这个问题需要更多 focused .它目前不接受答案。 想改进这个问题？更新问题，使其仅关注一个问题 editing this post . 2年前关闭。 Improve this questi
我想知道 C++ 中是否有内置方法来比较两个双向迭代器的顺序。例如，我有一个 Sum 函数来计算同一列表中 2 个迭代器之间的总和: double Sum(std::list::const_itera
在 MySQL 中，这两个查询之间有区别吗？ SELECT * FROM .... ORDER BY Created,Id DESC 和 SELECT * FROM .... ORDER BY Cre
我是一名优秀的程序员,十分优秀！