Laravel 8 ConsoleTvs / Charts 7 实施 Chartjs 选项

Question

我目前正在更新 ConsoleTvs / Charts 6 到 7。图表正在使用预期数据呈现。
图表未根据图例 point style 圆、padding 前 50、显示 'y' 和 'x' 轴 [=] 的任何设置 options 对象键呈现15=]，不显示 gridlines，将 datalabels 定位在末尾，以粗体和绿色开始偏移：

        const chart = new Chartisan({
            el: '#test_chart',
            url: "@chart('test_chart_route')",
            hooks: new ChartisanHooks()
            .colors()
            .datasets(
                [
                    { type: 'line', fill: false, borderColor: '#329865', backgroundColor: '#329865' }, 
                    { type: 'line', fill: false, borderColor: '#1e5b3c', backgroundColor: '#1e5b3c' },
                    { type: 'line', fill: false, borderColor: '#0f2d1e', backgroundColor: '#0f2d1e' }, 
                    { type: 'line', fill: false, borderColor: '#329865', backgroundColor: '#329865' }, 
                    { type: 'line', fill: false, borderColor: '#1e5b3c', backgroundColor: '#1e5b3c' },
                    { type: 'line', fill: false, borderColor: '#0f2d1e', backgroundColor: '#0f2d1e' }, 
                    { type: 'line', fill: false, borderColor: '#800000', backgroundColor: '#800000' }, 
                    { type: 'line', fill: false, borderColor: '#F70000', backgroundColor: '#F70000' },
                    { type: 'line', fill: false, borderColor: '#FF6F6F', backgroundColor: '#FF6F6F' }, 
                    { type: 'line', fill: false, borderColor: '#800000', backgroundColor: '#800000' }, 
                    { type: 'line', fill: false, borderColor: '#F70000', backgroundColor: '#F70000' },
                    { type: 'line', fill: false, borderColor: '#FF6F6F', backgroundColor: '#FF6F6F' },
                ]
            ),
            options: {
                        layout: {
                            padding: {
                                left: 0,
                                right: 0,
                                top: 50,
                                bottom: 0
                            },
                        },
                        aspectRatio: 1,
                        maintainAspectRatio: false,
                        responsive: true,
                        legend: {
                            display: true,
                            position: 'top',
                            labels: {
                                usePointStyle: true,
                                fontSize: 12,
                            },
                        },
                        elements: {
                            point: {
                                pointStyle: 'circle',
                            }
                        },
                        scales: {
                            xAxes: [{
                                    maxBarThickness: 120,
                                    scaleLabel: {
                                        display: true,
                                        labelString: "xAxes_label"
                                    },
                                    gridLines: {
                                        display: false
                                    },
                                    ticks: {
                                        fontSize: 10,
                                        maxRotation: 80,
                                        minRotation: 80,
                                        padding: 2
                                    },
                            }],
                            yAxes: [{
                                    scaleLabel: {
                                        display: true,
                                        labelString: "yAxes_label"
                                    },
                                    gridLines: {
                                        display: false,
                                        drawBorder: false
                                    },
                                    ticks: {
                                        display: true,
                                        fontSize: 10,
                                        suggestedMin: 0
                                    },
                            }],
                        },
                        plugins: {
                            datalabels: {
                                color: '#ff0a6c',
                                labels: {
                                    title: {
                                        font: {
                                            weight: 'bold',
                                            size: 11,
                                        }
                                    },
                                    value: {
                                        color: 'green'
                                    }
                                },
                                formatter: function(value, context) {
                                    return (value != '' && value !== undefined) ? Math.round(value * 100) / 100 : value;
                                },
                                anchor: 'end',
                                align: 'start',
                                display: 'auto',
                                clamp: false
                            }
                        }
                    }
        });

我也尝试过使用 ChartisanHooks().options({...options...}) 方法而不更改设置选项。

谁能告诉我正确的方向？

Answer 1

您没有使用 options 挂钩，而是将 options 定义为 属性。您应该使用 .options({ ... }) 而不是 options: { ... }.

options 钩子对我不起作用，也许我使用了过时的 Chartisan 库。根据Custom Hooks，也可以将options合并到图表中，如下：

.custom(function({ data, merge }) {
   return merge(data, {
     options: {
       ...
     }
   }),
})

请查看下面修改后的可运行代码，看看它如何与 merge 函数一起工作。

const chart = new Chartisan({
  el: '#test_chart',
  data: {
    "chart": {
      "labels": ["First", "Second", "Third"]
    },
    "datasets": [{
        "name": "Sample 1",
        "values": [10, 3, 7]
      },
      {
        "name": "Sample 2",
        "values": [1, 6, 2]
      }
    ]
  },
  hooks: new ChartisanHooks()
    .colors()
    .datasets(
      [{
          type: 'line',
          fill: false,
          borderColor: '#329865',
          backgroundColor: '#329865'
        },
        {
          type: 'line',
          fill: false,
          borderColor: '#1e5b3c',
          backgroundColor: '#1e5b3c'
        }
      ]
    )
    .custom(function({ data, merge }) {
      return merge(data, {
        options: {
          layout: {
            padding: {
              left: 0,
              right: 0,
              top: 50,
              bottom: 0
            },
          },
          aspectRatio: 1,
          maintainAspectRatio: false,
          responsive: true,
          legend: {
            display: true,
            position: 'top',
            labels: {
              usePointStyle: true,
              fontSize: 12,
            },
          },
          elements: {
            point: {
              pointStyle: 'circle',
            }
          },
          scales: {
            xAxes: [{
              maxBarThickness: 120,
              scaleLabel: {
                display: true,
                labelString: "xAxes_label"
              },
              gridLines: {
                display: false
              },
              ticks: {
                fontSize: 10,
                maxRotation: 80,
                minRotation: 80,
                padding: 2
              },
            }],
            yAxes: [{
              scaleLabel: {
                display: true,
                labelString: "yAxes_label"
              },
              gridLines: {
                display: false,
                drawBorder: false
              },
              ticks: {
                display: true,
                fontSize: 10,
                suggestedMin: 0
              },
            }],
          },
          plugins: {
            datalabels: {
              color: '#ff0a6c',
              labels: {
                title: {
                  font: {
                    weight: 'bold',
                    size: 11,
                  }
                },
                value: {
                  color: 'green'
                }
              },
              formatter: function(value, context) {
                return (value != '' && value !== undefined) ? Math.round(value * 100) / 100 : value;
              },
              anchor: 'end',
              align: 'start',
              display: 'auto',
              clamp: false
            }
          }
        }
      });
    }),
});

<script src="https://unpkg.com/chart.js@2.9.4/dist/Chart.min.js"></script>
<script src="https://unpkg.com/@chartisan/chartjs@^2.1.0/dist/chartisan_chartjs.umd.js"></script>
<div id="test_chart" style="height: 300px;"></div>