文章/答案/技术大牛

发布

社区首页 >问答首页 >根据react本机中的数据集更改图表中的笔划线颜色

问根据react本机中的数据集更改图表中的笔划线颜色
EN

Stack Overflow用户

提问于 2021-06-07 20:33:34

回答 1查看 172关注 0票数 2

下面是我对react-native-chart-kit所做的工作

但我想要喜欢这个-V

如果你有任何想法，请让我知道

react-native

charts

chart.js

linechart

回答 1

Stack Overflow用户

发布于 2021-06-07 20:52:56

示例：

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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67871692

复制

相似问题

问根据react本机中的数据集更改图表中的笔划线颜色
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问根据react本机中的数据集更改图表中的笔划线颜色EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问根据react本机中的数据集更改图表中的笔划线颜色
EN