javascript 如何在Google Gauge Chart中设置3种以上的颜色？

qrjkbowd 于 2023-05-21 发布在 Java

关注(0)|答案(4)|浏览(143)

我正在使用Google Charts API创建一个 Jmeter 图。我设置了这样的选项：

var options = {
   width: 350, height: 350,
   greenFrom: 0, greenTo: 50,
   yellowFrom: 51, yellowTo: 65,
   blueFrom:66, blueTo: 79,
   blueColor: "#FF4500",
   redFrom:81, redTo: 100,
   minorTicks: 5
};

它看起来像：

但蓝色不在66 - 79之间我该怎么解决这个问题？先谢谢你了。

JavaScript

来源：https://stackoverflow.com/questions/50234846/how-to-set-more-than-3-colors-in-google-gauge-chart

4条答案

按热度按时间

1tu0hz3e1#

有一个限制，在谷歌Gauge（3种颜色），因为我已经在相关论坛阅读：https://groups.google.com/forum/#!topic/google-visualization-API/Z6ghp0rsjM0/discussion
也许这个小部件符合您的需求：http://perfectwidgets.com/Main是更具体的这些：http://perfectwidgets.com/Demo/Gallery#Gauges/0

赞(0）回复(0）举报 2023-05-21

nkkqxpd92#

我相信唯一接受的颜色是green，yellow和red。不幸的是，我不认为他们有能力添加颜色超过这三个，虽然你似乎知道，你可以改变他们的颜色值。

编辑不仅是不可能的，而且他们也不允许以允许alpha通道的格式给出颜色（例如rgba）。所以你甚至不能做一些

var options = {
      width: 1600, height: 480,
      redFrom: 80, redTo: 100,
      redColor: "rgba(198, 0, 0, 0.67)",
      yellowFrom: 45, yellowTo: 90,
      yellowColor: "rgba(219, 190, 0, 0.67)",
      greenFrom: 25, greenTo: 45,
      minorTicks: 5
    };

试图“欺骗”中间的颜色变成橙子。太糟糕了。如果你想要更多的颜色选择，看起来你需要使用不同的工具。

赞(0）回复(0）举报 2023-05-21

cigdeys33#

var options = {
      width: 1600, height: 480,
      redFrom: 0, redTo: 35,
      redColor: "rgba(198, 0, 0, 0.67)",
      yellowFrom: 36, yellowTo: 49,
      yellowColor: "rgba(219, 190, 0, 0.67)",
      greenFrom: 25, greenTo: 45,
      minorTicks: 5
    };

赞(0）回复(0）举报 2023-05-21

xpszyzbs4#

我需要一个有5种颜色的 Jmeter 图，每种颜色占刻度的20%。我解决了这个问题如下：

用2种颜色绘制 Jmeter （结果是svg图像）
复制两种颜色的<path>标签
用三种颜色（最大值）绘制 Jmeter
将复制的两种颜色加到刻度上，结果：

下面是我的代码

<html>

<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>

<body>
    <div id="gaugechart" title="" data-data="[[Element, Percentage],[Value 1,63]]"
        style="width: 225px; height: 225px;"></div>
    <div id="gaugechart" title="" data-data="[[Element, Percentage],[Value 2,41]]"
        style="width: 80px; height: 80px;"></div>
    <script type="text/javascript">
        google.charts.load("current", {
            packages: ["gauge"]
        });
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            let gauges;
            let gaugeArray = [];
            let options = {
                redFrom: 0, redTo: 20,
                yellowFrom: 40, yellowTo: 60,
                greenFrom: 80, greenTo: 100,
                yellowColor: "yellow",
                minorTicks: 10
            };
            let options1 = {
                redFrom: 20, redTo: 40,
                greenFrom: 60, greenTo: 80,
                redColor: "orange",
                greenColor: "lightgreen",
                minorTicks: 10
            };
            if (typeof this_editor != "undefined") {
                gauges = this_editor.contentDocument.querySelectorAll("div[id=gaugechart]");
            } else {
                gauges = document.querySelectorAll("div[id=gaugechart]");
            }
            if (gauges.length > 0) {
                gauges.forEach((userItem) => {
                    let dataset = userItem.dataset["data"]
                        .split("],[")
                        .map((e, i) => {
                            let arr = e.replaceAll("[", "").replaceAll("]", "").split(",");
                            if (i > 0) {
                                arr[1] = Number(arr[1]);
                            }
                            return arr;
                        });
                    let data = google.visualization.arrayToDataTable(dataset);
                    let count = gaugeArray.push(chart = new google.visualization.Gauge(userItem)) - 1;
                    gaugeArray[count].draw(data, (options1));
                    let p = userItem.querySelectorAll("g path");
                    let x = document.createElement("path");
                    x.setAttribute("d", p[0].getAttribute("d"));
                    x.setAttribute("stroke", p[0].getAttribute("stroke"));
                    x.setAttribute("stroke-width", p[0].getAttribute("stroke-width"));
                    x.setAttribute("fill", "lightgreen");
                    let y = document.createElement("path");
                    y.setAttribute("d", p[1].getAttribute("d"));
                    y.setAttribute("stroke", p[1].getAttribute("stroke"));
                    y.setAttribute("stroke-width", p[1].getAttribute("stroke-width"));
                    y.setAttribute("fill", "orange");
                    gaugeArray[count].draw(data, (options));
                    userItem.querySelector("g path").after(x);
                    userItem.querySelector("g path").after(y);
                    userItem.innerHTML = userItem.innerHTML;
                });
            }
        }
    </script>
</body>

</html>

赞(0）回复(0）举报 2023-05-21

我来回答

javascript 如何在Google Gauge Chart中设置3种以上的颜色？

4条答案

相关问题

热门标签

最新问答