Question

我正在使用Google Charts生成简单的散点图。我在hAxis中绘制了两个标题，我想在左右方向设置hAxis标题。

喜欢

当前

我要在a轴上显示标题

import React from 'react';

const Button=(props)=>{

    const{onclick,className='',children}=props;
    return(
      <div>
          <button onClick={onclick} className={className} >{children}</button>
      </div>
    )

  }


export default Button;

#define V  300

pthread_cond_t cond;
pthread_mutex_t mutex;
char a[300];
int p = 0;
int w = 0;


void *thread1() {

    while(1){
        pthread_mutex_lock(&mutex);
        printf("thread1");
        while(p >0){
            pthread_cond_wait(&cond, &mutex);
        }

        p = fread(a, sizeof(char), V ,stdin);

        if(p == 0){
            pthread_exit(NULL);
        }
        if(p <= V){ 
            pthread_cond_signal(&cond);
        }
        pthread_mutex_unlock(&mutex);
    }

}

void *thread2() {
    while(1){
        pthread_mutex_lock(&mutex);
        printf("thread2");

        while(w >0){
            pthread_cond_wait(&cond, &mutex);
        }

        w = fwrite(a, sizeof(char),p, stdout);

        if(w == 0){
            pthread_exit(NULL);
        }
        if(w <= V ){ 
            pthread_cond_signal(&cond);
        }
        pthread_mutex_unlock(&mutex);
    }
}

int main (void) {
    printf("main/n");
    fflush(stdout);
    pthread_t t1, t2; 

    pthread_mutex_init(&mutex, NULL);
    pthread_cond_init (&cond, NULL);

    pthread_create(&t1, NULL, vlakno1,  NULL);
    pthread_create(&t2, NULL, vlakno2,  NULL);


    pthread_join(t1, NULL);
    pthread_join(t2, NULL);

    pthread_mutex_destroy(&mutex);
    pthread_cond_destroy(&cond);
    return 0;
}

我正在使用Google Charts生成简单的散点图。我在hAxis中绘制了两个标题，我想在左右方向设置hAxis标题。

Answer 1

开箱即用将不会添加两个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>

如何在Google图表中的x轴上显示两个标题？

1 个答案: