Question

想法是用户在绘制图表时是否不喜欢我们从烧瓶后端提供的颜色；他/她应该能够单击行/区域，然后编辑器单击编辑按钮并编辑颜色。）这是关于从UI进行用户编辑。因此在进行编辑时，他们应该会从调色板中选择。

这是我的烧瓶路线

@app.route('/bar_charts')
def bar_charts():
    labels = ["January", "February", "March", "April", "May", "June", "July", "August"]
    values = [10, 9, 8, 7, 6, 4, 7, 8]

    return render_template("barchart.html", labels=labels, values=values)

这是我的chart.js代码

{% extends 'base.html' %}
{% block content %}
    <h1>Bar Charts</h1>
    <canvas id="chart" width="600" height="400"></canvas>
    <input type="color" id="clr" onchange="UpdateColor(event)" value="#66FFEE" >

<script type="text/javascript" src="{{ url_for('static', filename='js/Chart.min.js') }}"></script>
<script type="text/javascript">

var randomColorGenerator = function () {
return '#' + (Math.random().toString(16) + '0000000').slice(2, 8);
};



        // bar chart data
   var barData = {
   labels : [{% for item in labels %}
                  "{{item}}",
              {% endfor %}],
   datasets : [
      {
            fillColor: '#FFEEAA',
            strokeColor: randomColorGenerator(),
            pointColor: randomColorGenerator(),
         data : [{% for item in values %}
                      {{item}},
                    {% endfor %}]
      }
      ]
   }

   // get bar chart canvas
   var mychart = document.getElementById("chart").getContext("2d");

   steps = 10
   max = 10
   // draw bar chart
   var Chart = new Chart(mychart).Bar(barData, {
        scaleOverride: true,
        scaleSteps: steps,
        scaleStepWidth: Math.ceil(max / steps),
        scaleStartValue: 0,
        scaleShowVerticalLines: true,
        scaleShowGridLines : true,
        barShowStroke : true,
        scaleShowLabels: true
   });
    function UpdateColor(event) {
        console.log( typeof event.target.value);
        event.preventDefault();

       var color = event.target.value;
        Chart.datasets.forEach(function(dataset){
        dataset.fillColor = color;

    });

    Chart.update()
    }

    </script>
{% endblock %}

这是现在的输出方式

在颜色更改中，更改值即将到来。但是图形的条形颜色不会更改。有人可以帮我解决这个问题

Answer 1

我已经在javascript中找到了可以完成此任务的代码

{% extends 'base.html' %}
{% block content %}
  <title>JS Bin</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
</head>
<body>
  <canvas id="myChart" width="400" height="400"></canvas>
  <input type="color" id ="colorPicker"/>
</body>
  <script>
    var ctx = document.getElementById("myChart").getContext('2d');
     var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: [{% for item in labels %}
                  "{{item}}",
              {% endfor %}],
        datasets: [{
            label: '# of Votes',
            data: [{% for item in values %}
                      {{item}},
                    {% endfor %}],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

    var colorPicker = document.getElementById("colorPicker");
    colorPicker.addEventListener("change", updateChart, false);

    function updateChart(e) {
      e.preventDefault();

      myChart.data.datasets[0].backgroundColor[0] = e.target.value;
      myChart.data.datasets[0].backgroundColor[1] = e.target.value;
      myChart.data.datasets[0].backgroundColor[2] = e.target.value;
      myChart.data.datasets[0].backgroundColor[3] = e.target.value;
      myChart.data.datasets[0].backgroundColor[4] = e.target.value;
      myChart.data.datasets[0].backgroundColor[5] = e.target.value;
      myChart.data.datasets[0].backgroundColor[6] = e.target.value;
      myChart.data.datasets[0].backgroundColor[7] = e.target.value;
      myChart.update();
    }

  </script>
{% endblock %}

Answer 2

通过使用此代码，我们可以更改图形每个条形的颜色

{% extends 'base.html' %}
{% block content %}
  <title>JS Bin</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
</head>
<body>
  <canvas id="myChart" width="400" height="400"></canvas>
  <input type="color" id ="colorPicker" hidden/>
</body>
  <script>
      var color = '#456212';
      var lastIndex = null;
    var canvas = document.getElementById("myChart");
     var myChart = new Chart(canvas.getContext('2d'), {
    type: 'bar',
    data: {
        labels: [{% for item in labels %}
                  "{{item}}",
              {% endfor %}],
        datasets: [{
            label: '# of Votes',
            data: [{% for item in values %}
                      {{item}},
                    {% endfor %}],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

     canvas.addEventListener("click", ChangeColor, false);

     colorPicker = document.getElementById('colorPicker');

     colorPicker.addEventListener("change", getColor, false);


    function getColor(e){

       //
        console.log(this.lastIndex)
        myChart.data.datasets[0].backgroundColor[lastIndex] =  e.target.value;
        console.log(e.target.value);
        myChart.update();

    }


 function ChangeColor(e){
        e.preventDefault();
        var activePoints = myChart.getElementsAtEvent(e);
        lastIndex = activePoints[0]._index;
        this.color = myChart.data.datasets[0].backgroundColor[lastIndex];
        console.log('Before', this.color);
        var colorPicker = document.getElementById('colorPicker').click();
        //console.log('After',this.color);
    }



  </script>
{% endblock %}

如何根据用户需要更改图表线或区域颜色？

2 个答案: