Question

我正在尝试从Google Charts中添加并轻松地将项目设置为Gauge Chart，但我找不到任何有关此文档的文档。

有人可以给我一个如何设置这个Gauge Chart样式的链接。

基本上，我需要做的最后一点是在我的Gauge底部添加一个K.

示例显示底部的数字，所以我代表美元，所以当Gauge加载时，我在数字的末尾附加一个K.

我知道这可以通过CSS3和JS完成，但我有一个孤独项目的问题。

这是最底层的数字，AKA

以下是代码：

google.charts.load('current', { 'packages': ['corechart', 'timeline', 'gauge'] });
    google.charts.setOnLoadCallback(drawGaugeAmountReceivedChart);
    function drawGaugeAmountReceivedChart() {

        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Invested', 285]
        ]);

        var options = {
            width: 1000, height: 480,
            redFrom: 125, redTo: 285,
            yellowFrom: 40, yellowTo: 125,
            min: 0,
            max: 285,
            minorTicks: 20
        };

        var chart = new google.visualization.Gauge(document.getElementById('gaugeAmountReceivedChart'));
        chart.draw(data, options);
            data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
            var txtElements = document.getElementById('gaugeAmountReceivedChart').getElementsByTagName('text');
            for (var i = 0; i < txtElements.length; i++) {
                if (txtElements[i].hasAttribute('text-anchor')) {
                    var xx = txtElements[i].getAttribute('text-anchor');
                    switch (xx) {
                        case 'start':
                            txtElements[i].textContent = 0 + 'k';
                            break;
                        case 'middle':
                         //tied everything in the book 
                            break;
                        case 'end':
                            txtElements[i].textContent = 285 + 'k';
                            break;
                    };
                };
            }
            chart.draw(data, options);
    };

HTML

  <div id="gaugeAmountReceivedChart" style="float:left; width: 1000px; height:500px;"></div>

如果此图表包含工具提示和图例，可以使事情变得更好。任何有这方面经验的人都会很棒！

或许有人对我有不同的图表推荐？

Answer 1

使用对象表示法提供初始值...
{v: 285, f: '285k'}

使用setCell提供新值/格式化值，
请参阅以下工作代码段...

google.charts.load('current', {
  callback: drawGaugeAmountReceivedChart,
  packages: ['corechart', 'timeline', 'gauge']
});

function drawGaugeAmountReceivedChart() {
    var data = google.visualization.arrayToDataTable([
      ['Label', 'Value'],
      ['Invested', {v: 285, f: '285k'}]  // <-- use object notation to provide formatted value
    ]);

    var options = {
        width: 1000, height: 480,
        redFrom: 125, redTo: 285,
        yellowFrom: 40, yellowTo: 125,
        min: 0,
        max: 285,
        minorTicks: 20
    };

    var chart = new google.visualization.Gauge(document.getElementById('gaugeAmountReceivedChart'));
    chart.draw(data, options);
    // use setCell to provide formatted value
    data.setCell(0, 1, 40 + Math.round(60 * Math.random()), (40 + Math.round(60 * Math.random())) + 'k');
    var txtElements = document.getElementById('gaugeAmountReceivedChart').getElementsByTagName('text');
    for (var i = 0; i < txtElements.length; i++) {
        if (txtElements[i].hasAttribute('text-anchor')) {
            var xx = txtElements[i].getAttribute('text-anchor');
            switch (xx) {
                case 'start':
                    txtElements[i].textContent = 0 + 'k';
                    break;
                case 'middle':
                 //tied everything in the book
                    break;
                case 'end':
                    txtElements[i].textContent = 285 + 'k';
                    break;
            };
        };
    }
    chart.draw(data, options);
};

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="gaugeAmountReceivedChart"></div>

如何设置Google Charts的样式

1 个答案: