Символы вертикальной полосы с разными цветами в зависимости от диапазона значений в React - PullRequest
Новая
       9

Символы вертикальной полосы с разными цветами в зависимости от диапазона значений в React

0 голосов
/ 09 июля 2020

В React I рисовать гистограммы с разными цветами для каждого столбца в зависимости от значения.

Например:

если значение равно 0-50 Тогда зеленый

51 -100 Затем оранжевый

101-200 Затем желтый 

  <BarChart  data={data} margin={{ top: 5, right: 10, left: 0, bottom: 5 }}>
          <CartesianGrid />
          <XAxis dataKey="label" tick={{ angle: -45 }} interval={0}/>
          {isIndex ?  
            <YAxis width={50} dataKey="value" domain={[0, max]} tickCount={11} type="number" /> :
            <YAxis width={50} dataKey="value" domain={[0, max]} type="number" />}
          <Tooltip content={<CustomTooltip stdVal={stdVal} unit={unit} barActiveTT={barActiveTT} lineActiveTT={lineActiveTT} />} />
        
          <Bar dataKey="value" fill="#8884d8" onMouseOver={() => { this.setState({ barActiveTT: true }) }} onMouseOut={() => { this.setState({ barActiveTT: false }) }} >
          {
              data.map((entry, index) => {
                var color="";
                if(entry.value < 50)
                {
                  color = "#00e400";
                }
                else if(entry.value > 50 && entry.value < 100)
                {
                  color =   "#ffff00";
                }
                else
                {
                  color = "#ff7e00";
                }
                return <Cell fill="{color}" />;
              })
          }
          </Bar>              
        </BarChart>

Пожалуйста, помогите

...