Блог

Главная - Вопросы по программированию - измените цвет линии штриха на диаграмме в соответствии с наборами данных в react native

измените цвет линии штриха на диаграмме в соответствии с наборами данных в react native

#react-native #charts #chart.js #linechart

Вопрос:

Я хочу изменить цвет линии штриха в соответствии с диапазоном данных.
вот что я сделал с react-native-chart-kit

но я хочу, чтобы мне это понравилось—V если у вас есть какие-либо идеи, пожалуйста, дайте мне знать

Ответ №1:

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

Пример:

 var options = {
  type: 'line',
  data: {
    labels: ["Red", "", "Blue", "", "Yellow", "", "Green", "", "Purple", "", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 15.5, 19, 11, 3, 4, 5, 3.5, 2, 2.5, 3],
      borderWidth: 1,
      pointRadius: (ctx) => (ctx.index % 2 === 0 ? 3 : 0),
      backgroundColor: (ctx) => {
        if (ctx.parsed === undefined) return;

        return ctx.parsed.y > 16 ? 'orange' : ctx.parsed.y > 12 ? 'green' : ctx.parsed.y > 8 ? 'purple' : ctx.parsed.y > 4 ? 'blue' : 'black'
      },
      segment: {
        borderColor: ctx => (ctx.p1.parsed.y > 16 ? 'orange' : ctx.p1.parsed.y > 12 ? 'green' : ctx.p1.parsed.y > 8 ? 'purple' : ctx.p1.parsed.y > 4 ? 'blue' : 'black')
      }
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          reverse: false
        }
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options); 
 <body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.js"></script>
</body>

Комментарии:

1. @leeLenlee не могли бы вы описать, как мы можем использовать это в react native без WebView.?

2. Я, честно говоря, не знаю, никогда не использовал react native, так как вы пометили вопрос chart.js и highcharts, и ireact native используют JavaScript, я думал, вы знаете, как его там использовать

3. это прекрасно. Давайте разберемся с этим.

4. Ты это понял?

Метки: