Как показать два заголовка по оси X в Google Charts? - PullRequest
Новая
       14

Как показать два заголовка по оси X в Google Charts?

2 голосов
/ 07 марта 2019

Я использую Google Charts для простой точечной диаграммы. Я нарисовал два заголовка в Оси, я хотел бы установить название Оси влево и вправо.

Как

Как

ток

ток

Я хочу показать заголовок по оси 

function drawChart() {
    // Define the chart to be drawn.
    var data = new google.visualization.DataTable();
    data.addColumn('number', '');
    data.addColumn('number', '');
    data.addRows([
        [-0.5, 1],
        [100, 1],
        [-80, 2],
        [25, 2],

        [60, 8],
    ]);

    // Set chart options
    var options = {
        title: 'guilt experience Vs eat satisfaction',
        titlePosition: 'none',
        position: 'center',
        hAxis: {
            title: '',
            minValue: 0,
            maxValue: 15,
            ticks: [0, 20, 40, 60, 80, 100, -20, -40, -60, -80, -100]
        },

        vAxis: {
            title: '',
            minValue: 0,
            ticks: [0, 1, 2, 3, 4, 5, 6, 7, 8]
        },
        legend: {
            position: 'none'
        },
    };

    // Instantiate and draw the chart.
    var container = document.getElementById('chart_div');
    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

    google.visualization.events.addListener(chart, 'ready', function() {
        var layout = chart.getChartLayoutInterface();

        for (var i = -0; i < data.getNumberOfRows(); i++) {
            // add image above every fifth element
            var xPos = layout.getXLocation(data.getValue(i, 0));
            var yPos = layout.getYLocation(data.getValue(i, 1));
            var whiteHat = container.appendChild(document.createElement('img'));
            if (data.getValue(i, 0) < 0) {
                whiteHat.src = 'https://i.imgur.com/LqiTeQI.png';
            } else {
                whiteHat.src = 'https://i.imgur.com/rACTObW.png';
            }
            whiteHat.style.position = 'absolute';
            whiteHat.style.height = '15px';
            whiteHat.style.width = '15px';
            // 16x16 (image size in this example)
            whiteHat.style.top = (yPos) + 'px';
            whiteHat.style.left = (xPos) + 'px';
        }
    });
    chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
</script>
<script type="text/javascript">
  google.charts.load('current', {
    packages: ['corechart', 'scatter']
  });
</script>
<div id="chart_div" ></div>

Я использую Google Charts для простой точечной диаграммы. Я нарисовал два заголовка в Оси, я хотел бы установить название Оси влево и вправо.

1 Ответ

2 голосов
/ 07 марта 2019

ничего из коробки не позволит вам добавить два заголовка по оси X.

вот несколько вариантов ...

1) используйте тот же метод, который вы используете для размещения изображений, чтобы разместить пару <span> элементов с нужными заголовками.

2) используйте неразрывный пробел Unicode (\u00A0) для создания одного длинного заголовка.

например. 

Guilt Value\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0Eat Value

см. Следующий рабочий фрагмент ... 

function drawChart() {
    // Define the chart to be drawn.
    var data = new google.visualization.DataTable();
    data.addColumn('number', '');
    data.addColumn('number', '');
    data.addRows([
        [-0.5, 1],
        [100, 1],
        [-80, 2],
        [25, 2],

        [60, 8],
    ]);

    // Set chart options
    var options = {
        title: 'guilt experience Vs eat satisfaction',
        titlePosition: 'none',
        position: 'center',
        hAxis: {
            title: 'Guilt Value\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0Eat Value',
            minValue: 0,
            maxValue: 15,
            ticks: [0, 20, 40, 60, 80, 100, -20, -40, -60, -80, -100]
        },

        vAxis: {
            title: '',
            minValue: 0,
            ticks: [0, 1, 2, 3, 4, 5, 6, 7, 8]
        },
        legend: {
            position: 'none'
        },
    };

    // Instantiate and draw the chart.
    var container = document.getElementById('chart_div');
    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

    google.visualization.events.addListener(chart, 'ready', function() {
        var layout = chart.getChartLayoutInterface();

        for (var i = -0; i < data.getNumberOfRows(); i++) {
            // add image above every fifth element
            var xPos = layout.getXLocation(data.getValue(i, 0));
            var yPos = layout.getYLocation(data.getValue(i, 1));
            var whiteHat = container.appendChild(document.createElement('img'));
            if (data.getValue(i, 0) < 0) {
                whiteHat.src = 'https://i.imgur.com/LqiTeQI.png';
            } else {
                whiteHat.src = 'https://i.imgur.com/rACTObW.png';
            }
            whiteHat.style.position = 'absolute';
            whiteHat.style.height = '15px';
            whiteHat.style.width = '15px';
            // 16x16 (image size in this example)
            whiteHat.style.top = (yPos) + 'px';
            whiteHat.style.left = (xPos) + 'px';
        }
    });
    chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
</script>
<script type="text/javascript">
  google.charts.load('current', {
    packages: ['corechart', 'scatter']
  });
</script>
<div id="chart_div" ></div>
...