时间戳

首页 > 解决方案 > Plotly.js - 更改对象属性内的值

javascript - Plotly.js - 更改对象属性内的值

问题描述

我是一个真正的 javascript 初学者，并且有一个项目需要使用 Plotly.js 来可视化图表中的数据。我目前正在学习制作基本条形图。这是我的代码：

HTML

<head>
    <script src='https://cdn.plot.ly/plotly-2.4.2.min.js'></script>
</head>

<body>
  <input type="checkbox" id="cb15">2015
  <input type="checkbox" id="cb16">2016
  <input type="checkbox" id="cb17">2017
    <div id='grafik'></div>
</body>

Javascript

var data = [
  {
    x: ['Banyumanik', 'Gunungpati', 'Mijen', 'Tembalang'],
    y: [18, 29, 20, 23],
    type: 'bar',
    width: '0.5',
    marker: {
      color: 'red'
    }
  }
];

function switchBar() {
var cb15 = document.getElementById('cb15');
var cb16 = document.getElementById('cb16');
var cb17 = document.getElementById('cb17');

if (cb15.checked) {
       data[0].y = [19,25,16,21];
      } else if (cb16.checked) {
        data[0].y = [10,23,7,20]
      } else if (cb17.checked) {
        data[0].y = [21,17,14,26]
      }
}

Plotly.newPlot('grafik', data);

任何人都可以帮助我如何使我的条形图根据选中的复选框更改值吗？非常感谢您提前。

标签： javascriptplotly.js

解决方案

推荐阅读