Поскольку я могу добавлять титул рядом или под точкой в highcharts

Question

Поскольку я могу добавлять титул рядом или под точкой в highcharts

я нуждаюсь в маленькой помощи со следующим:

У меня есть следующий график:

Highcharts.chart('rendimientosall', {
	colors: ['#00ff6c','#03deec','#f5940a'],
    chart: {
        type: 'column'
    },
    title: {
        text: 'RENDIMIENTO'
    },
    subtitle: {
        text: 'Acumulado'
    },
    xAxis: {
        categories: ['190 cantidad: 6', '240 cantidad: 13', '320 cantidad: 5'],crosshair: true,
		
		labels: { style: { color: 'networking', fontSize:'15px' } }
    },
	
	
	
	
	yAxis: [{ // Primary yAxis
    labels: {
      format: '{value}',
      style: {
        color: Highcharts.getOptions().colors[1]
      }
    },
    title: {
      text: 'Rendimiento (Km)',
      style: {
        color: Highcharts.getOptions().colors[1]
      }
    }
  }, { // Secondary yAxis
    title: {
      text: '',
      style: {
        color: Highcharts.getOptions().colors[0]
      }
    },
    labels: {
      format: '{value} ',
      style: {
        color: Highcharts.getOptions().colors[0]
      }
    },
    opposite: true
  }],
  tooltip: {
    shared: true
  },
  
  
    legend: {
        enabled: false
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'black',
            }
        }
    },legend: {
            align: 'center',
            borderWidth: 0
        },


    series: [{
        name: 'Rendimiento',
        colorByPoint: true,
        data: [{
            name: '190',
            y: 112108,
        }, {
            name: '240',
            y: 84289,
        }, {
            name: '320',
            y: 70249,
        }]
    },{
        type: 'line',
        name: 'Meta',
		color: 'transparent',
        data: [83712,72341,69638],
        marker: {
            lineWidth: 5,
            lineColor: Highcharts.getOptions().colors[5],
            fillColor: 'white'
        },dataLabels: {
            enabled: true,
			color: 'red'
        }
    }],
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="rendimientosall" style="min-width: 310px; height: 400px; margin: 0 auto; margin-top:20px;"></div>

То, что я нуждаюсь в том, чтобы сделать, он состоит в том, чтобы размещать в КРАСНЫХ точках текст, который говорил бы костлявую ЦЕЛЬ, может состоять рядом с красной точкой или под красной точкой текст в том, чтобы он сказал - поместите - возможный делать это?

Если закрепляется в легенде красная точка, он считает именем Цель, но мне не удается разместить это же самое имя внутри графика, идея состоит в том, чтобы ему удалось видеть внутри бруска под красной точкой или в сторону красной точки.

Я остаюсь внимательным большое спасибо.

0

html5

задан estrada 06.11.2019, 21:47

Ссылка

1 ответ

Похожие вопросы

LPZadkiel · Accepted Answer · 01.12.2019, 12:30

Чтобы издавать форму, в которой он является dataLabel, ты должен распределять одну funciГіn в свойстве formatter из dataLabel, будь funciГіn будь должен возвращать string, который будет являться тем, что mostrarГЎ в label. Чтобы вооружать этот string ты можешь использовать объект this внутри функции, которая представляет Игчарт Поинт

Adicionalmente я agreguГ© свойство useHTML то, что позволяет добавлять этикетки html в string, который возвращает ее funciГіn, и этих добавляют style или css class (я это делаем из-за личных предпочтений), если ты используешь это, должен считать, что весь стиль dataLabel, что назначенная по умолчанию теряется, и ты сейчас должен стиль dГЎrselo в объекты html, что ты использовал

Highcharts.chart('rendimientosall', {
	colors: ['#00ff6c','#03deec','#f5940a'],
    chart: {
        type: 'column'
    },
    title: {
        text: 'RENDIMIENTO'
    },
    subtitle: {
        text: 'Acumulado'
    },
    xAxis: {
        categories: ['190 cantidad: 6', '240 cantidad: 13', '320 cantidad: 5'],crosshair: true,
		
		labels: { style: { color: 'networking', fontSize:'15px' } }
    },
	
	
	
	
	yAxis: [{ // Primary yAxis
    labels: {
      format: '{value}',
      style: {
        color: Highcharts.getOptions().colors[1]
      }
    },
    title: {
      text: 'Rendimiento (Km)',
      style: {
        color: Highcharts.getOptions().colors[1]
      }
    }
  }, { // Secondary yAxis
    title: {
      text: '',
      style: {
        color: Highcharts.getOptions().colors[0]
      }
    },
    labels: {
      format: '{value} ',
      style: {
        color: Highcharts.getOptions().colors[0]
      }
    },
    opposite: true
  }],
  tooltip: {
    shared: true
  },
  
  
    legend: {
        enabled: false
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'black',
            }
        }
    },legend: {
            align: 'center',
            borderWidth: 0
        },


    series: [{
        name: 'Rendimiento',
        colorByPoint: true,
        data: [{
            name: '190',
            y: 112108,
        }, {
            name: '240',
            y: 84289,
        }, {
            name: '320',
            y: 70249,
        }]
    },{
        type: 'line',
        name: 'Meta',
		color: 'transparent',
        data: [83712,72341,69638],
        marker: {
            lineWidth: 5,
            lineColor: Highcharts.getOptions().colors[5],
            fillColor: 'white'
        },dataLabels: {
            enabled: true,
			      color: 'red',
            useHTML: true,
            formatter: function() {
              let dataLabelText = `<div style="text-align: center;">
              <div>${this.y.toLocaleString()}</div>
              <div>Meta</div>
              </div>`;
              return dataLabelText;
            }
        }
    }],
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="rendimientosall" style="min-width: 310px; height: 400px; margin: 0 auto; margin-top:20px;"></div>

Превосходный, pensé что был бы более сложный sos groso. приветом и большое спасибо. — estrada, 06.11.2019, 22:47

Поскольку я могу добавлять титул рядом или под точкой в highcharts

Теги

Похожие вопросы